如何用Webpack同步加载MDX导航、异步加载页面模块？

你这个需求的核心是把所有MDX的frontmatter数据从异步模块中抽离出来，单独打包成一个同步加载的chunk，这样导航可以直接用这些数据渲染，而页面本身依然保持代码分割的异步加载状态。下面是具体的实现步骤：

1. 编写Webpack插件收集Frontmatter数据 #

首先你需要一个自定义Webpack插件，在构建过程中收集所有MDX文件的frontmatter信息。这个插件要在compilation阶段介入，通过监听模块的解析结果来提取数据：

class FrontmatterCollectorPlugin {
  constructor(options = {}) {
    this.outputFile = options.outputFile || './src/generated/nav-data.js';
  }

  apply(compiler) {
    // 存储所有收集到的frontmatter数据
    const navData = [];

    // 监听模块解析完成的钩子，提取frontmatter
    compiler.hooks.compilation.tap('FrontmatterCollectorPlugin', (compilation) => {
      compilation.hooks.afterOptimizeModules.tap('FrontmatterCollectorPlugin', (modules) => {
        modules.forEach(module => {
          // 只处理MDX模块（根据你的loader规则调整判断条件）
          if (module.resource?.endsWith('.mdx')) {
            // 这里假设你的MDX loader已经把frontmatter挂载到module上了
            // 如果没有，你可以在MDX loader里把frontmatter添加到module的自定义属性中
            const frontmatter = module.frontmatter;
            if (frontmatter) {
              navData.push({
                ...frontmatter,
                // 记录页面的路由路径，这里可以根据你的文件结构生成
                path: this.getRoutePath(module.resource)
              });
            }
          }
        });
      });
    });

    // 在构建完成前，把收集到的数据写入一个新文件
    compiler.hooks.emit.tapAsync('FrontmatterCollectorPlugin', (compilation, callback) => {
      const content = `export const navData = ${JSON.stringify(navData, null, 2)};`;
      // 把文件添加到编译资源中
      compilation.assets[this.outputFile] = {
        source: () => content,
        size: () => content.length
      };
      callback();
    });
  }

  // 根据MDX文件路径生成对应的路由路径（示例逻辑，根据你的项目调整）
  getRoutePath(filePath) {
    // 比如把src/pages/about.mdx转换成/about
    return filePath.replace(/^src\/pages\/(.*)\.mdx$/, '/$1').toLowerCase();
  }
}

module.exports = FrontmatterCollectorPlugin;

2. 修改MDX Loader传递Frontmatter #

如果你的现有MDX loader还没有把frontmatter传递给模块，需要调整loader代码，把frontmatter挂载到模块对象上：

// 示例MDX loader片段
module.exports = async function(source) {
  const { frontmatter, content } = await parseMDX(source);
  // 把frontmatter挂载到当前模块上，供插件收集
  this._module.frontmatter = frontmatter;
  // 继续处理MDX内容，返回编译后的组件代码
  const compiled = await compileMDX(content);
  return compiled;
};

3. 配置Webpack使用插件 #

在你的webpack配置文件中引入并使用这个插件：

const FrontmatterCollectorPlugin = require('./path-to-your-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new FrontmatterCollectorPlugin({
      outputFile: './src/generated/nav-data.js'
    })
  ]
};

4. 在应用中同步加载导航数据，异步加载页面 #

现在你可以直接导入生成的nav-data.js来渲染导航，而页面组件依然用代码分割异步加载：

import { navData } from './generated/nav-data';
import { lazy, Suspense } from 'react';

// 异步加载页面组件的函数（根据路由路径匹配MDX文件）
const loadPage = (path) => {
  // 这里的路径映射逻辑要和插件中的getRoutePath对应
  const filePath = path.replace(/^\//, 'src/pages/') + '.mdx';
  return lazy(() => import(`../${filePath}`));
};

function Navigation() {
  return (
    <nav>
      {navData.map(item => (
        <a key={item.path} href={item.path}>
          {item.title}
        </a>
      ))}
    </nav>
  );
}

function App() {
  const [currentPath, setCurrentPath] = useState('/');
  const PageComponent = loadPage(currentPath);

  return (
    <div>
      <Navigation />
      <Suspense fallback={<div>Loading...</div>}>
        <PageComponent />
      </Suspense>
    </div>
  );
}

关键注意点 #

• 插件介入时机：选择afterOptimizeModules钩子是因为此时所有模块已经解析完成，frontmatter数据已经可以获取；emit钩子则是在资源输出前，把生成的导航数据文件添加到编译资源中。
• 避免破坏异步加载：我们只是抽离了frontmatter数据，MDX页面本身的代码依然会被webpack做代码分割，通过import()异步加载，不会影响页面的懒加载效果。
• 路径映射一致性：插件中生成路由路径的逻辑和应用中加载页面的路径映射必须保持一致，否则会出现找不到组件的问题。

内容的提问来源于stack exchange，提问作者Mr. Hedgehog