延遲載入

簡介複製錨點連結

預設情況下，所有 Markdown 與 MDX 檔案都必須先經過預先編譯，開發伺服器也同樣受此限制。

對於大型文件網站而言，這可能會拉長開發伺服器的啟動時間。您可以在 doc 集合上啟用 Async 或 Dynamic 模式來改善這個問題。

Async 模式複製錨點連結

Async 模式會透過非同步匯入來產生集合的輸出。

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    async: true,
  },
});

視您使用的打包工具而定，這可能會大幅縮短開發伺服器的編譯時間。

Dynamic 模式複製錨點連結

Dynamic 模式會進行隨需編譯，並在執行階段執行編譯後的輸出結果。

建議您安裝 shiki 並將其設為外部相依套件 (externalize) ：

npm i shiki

在集合中啟用 Dynamic 模式，方式如下：

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    dynamic: true,
  },
});

接著，請依照 Dynamic Entry 的說明，改從 dynamic entry 存取集合。

使用方式複製錨點連結

您仍可在 page 物件上存取 frontmatter 屬性，但必須呼叫非同步函式 load()，才能載入編譯後的內容 (及其匯出項目) 。

例如：

import { source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';

const page = source.getPage(['...']);

if (page) {
  // 可直接使用 frontmatter 屬性
  console.log(page.data);

  // Markdown 內容需要使用 await 載入
  const { body: MdxContent, toc } = await page.data.load();

  console.log(toc);

  return <MdxContent components={getMDXComponents()} />;
}

使用 Async 或 Dynamic 模式時，強烈建議您改用第三方服務實作搜尋功能，這類服務通常更擅長為大量內容建立索引。