功能
懒加载
Fumadocs MDX 异步和动态加载模式
Fumadocs MDX 支持两种懒加载模式，以提升大型文档站点的开发服务器性能。
Async 模式
Async 模式使用异步导入生成集合输出，显著减少编译时间。
Docs 集合配置：
import { defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
docs: {
async: true,
},
});Doc 集合配置：
import { defineCollections } from 'fumadocs-mdx/config';
export const doc = defineCollections({
type: 'doc',
dir: 'content/docs',
async: true,
});注意：Turbopack 目前不支持懒打包，async 模式仅在使用 Next.js 时改善服务器性能。
Dynamic 模式
Dynamic 模式使用 MDX Remote 进行按需编译，实现最大性能优化。
依赖安装：
npm i @fumadocs/mdx-remote shiki配置：
// Docs 集合
export const docs = defineDocs({
dir: 'content/docs',
docs: {
dynamic: true,
},
});
// Doc 集合
export const doc = defineCollections({
type: 'doc',
dir: 'content/docs',
dynamic: true,
});使用模式
使用 async 或 dynamic 模式时，frontmatter 数据立即可用，但编译后的内容需要 await load() 函数：
import { source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';
const page = source.getPage(['...']);
if (page) {
console.log(page.data); // Frontmatter 立即可用
const { body: MdxContent, toc } = await page.data.load();
return <MdxContent components={getMDXComponents()} />;
}Dynamic 模式限制
- MDX 文件中不允许 import/export 语句 — 通过
componentsprop 传递组件 - 图片必须使用 URL 引用（如
/images/test.png），不能使用文件路径./image.png；将图片存放在 public 文件夹中
搜索建议
使用 async 或 dynamic 模式时，强烈建议使用第三方搜索服务，它们通常更擅长处理大量内容索引。