性能

概览

🌐 Overview

Fumadocs MDX 是一个打包器插件，换句话说，它的性能瓶颈较高。对于像 Webpack 和 Turbopack 这样的打包器，处理接近 500+ 个 MDX 文件的大型文档站点已经足够，这对几乎所有的使用场景来说都是足够的。

🌐 Fumadocs MDX is a bundler plugin, in other words, it has a higher performance bottleneck. With bundlers like Webpack and Turbopack, it is enough for large docs sites with nearly 500+ MDX files, which is sufficient for almost all use cases.

由于 Fumadocs MDX 可以与你的打包工具一起使用，你可以在 MDX 文件中导入任何文件，包括客户端组件。这提供了高度的灵活性，并确保所有内容默认情况下都经过优化。

🌐 Since Fumadocs MDX works with your bundler, you can import any files including client components in your MDX files. This allows high flexibility and ensures everything is optimized by default.

图片优化

🌐 Image Optimization

Fumadocs MDX 使用 Remark Image 将图片解析为静态导入。因此，你的图片将自动针对你的 React 框架（例如 Next.js Image API）进行优化。

🌐 Fumadocs MDX resolves images into static imports with Remark Image. Therefore, your images will be optimized automatically for your React framework (e.g. Next.js Image API).

![Hello](./hello.png)

or in public folder

![Hello](/hello.png)

产量：

🌐 Yields:

import HelloImage from './hello.png';

<img alt="Hello" src={HelloImage} />

注意事项

🌐 Caveats

虽然 Fumadocs MDX 可以处理近 500 个以上的文件，但它可能会运行缓慢且效率低下。大量的 MDX 文件可能会在构建和开发模式下导致极高的内存使用率。

🌐 Although Fumadocs MDX can handle nearly 500+ files, it could be slow and inefficient. A huge amount of MDX files can cause extremely high memory usage during build and development mode.

这是因为：

🌐 This is because of:

• 打包工具在后台做了大量工作来打包 MDX 和 JavaScript 文件并优化性能。
• 打包工具不应该编译数百个 MDX 文件。

解决方案

🌐 Solutions

主要的解决方案是按需编译，这样内容只有在被请求时才会被加载。

🌐 The main solution is to make the compilation on-demand, such that content is only loaded when it's being requested.

远程来源

🌐 Remote Source

创建具有远程内容加载的自定义内容源。

🌐 Create your custom content source with remoting content loading.

你可以确保你的自定义源无需预编译内容文件，它可以通过 SSG 按需处理这些文件，这可以提高构建速度。 但是，你无法利用构建时优化（例如打包）。

🌐 You can ensure your custom source doesn't need to pre-compile content files, it can process them on-demand with SSG which can improve your build speed. However, you cannot leverage build time optimizations (e.g. bundling).

请参见 自定义来源 以实现自定义来源。

🌐 See Custom Source for implementing custom sources.

延迟加载

🌐 Lazy Loading

请参阅 延迟加载。

🌐 See Lazy Loading.