Next.js中用mdx-bundler时，不修改largePageDataBytes解决MDX页面数据超限警告

以下是实际项目中验证有效的优化手段：

• 拆分MDX内容与页面元数据
  不要将完整的MDX编译产物（包括大段文本、代码块）全部通过getStaticProps传递给页面组件。仅在props中传递必要的元数据（如标题、slug、发布日期、摘要），然后在页面组件中通过动态导入的方式加载MDX编译后的组件。示例：

  // 页面组件
  import { Suspense } from 'react';
  const MdxContent = React.lazy(() => import(`../compiled-mdx/${slug}.js`));
  
  export default function BlogPost({ meta }) {
    return (
      <div>
        <h1>{meta.title}</h1>
        <Suspense fallback={<div>Loading...</div>}>
          <MdxContent />
        </Suspense>
      </div>
    );
  }
  

• 剥离MDX中的大体积静态资源
  避免在MDX中内嵌base64格式的图片、大段内嵌代码或二进制内容。将这些资源上传到CDN或静态资源目录，在MDX中通过URL引用。比如把<img src="data:image/png;base64,..." />替换为<img src="/images/post-cover.png" />，彻底移除资源二进制数据对页面数据体积的占用。

• 优化MDX编译配置
  调整mdx-bundler的编译选项，移除不必要的编译产物：

  • 禁用无需的插件（如生成完整AST的插件）
  • 只保留编译后的JSX代码，不附带额外调试信息或冗余元数据
    示例配置：

  import { bundleMDX } from 'mdx-bundler';
  
  const result = await bundleMDX({
    source: mdxContent,
    xdmOptions: (options) => {
      // 过滤掉生成AST的插件
      options.plugins = options.plugins.filter(plugin => 
        !plugin.name.includes('unified-ast')
      );
      return options;
    },
  });
  

• 使用高效的序列化方式
  Next.js默认用JSON序列化页面数据，对于大体积数据可以改用更紧凑的序列化格式（如msgpack）。在getStaticProps中用msgpack序列化数据，页面组件中反序列化：

  import msgpack from '@msgpack/msgpack';
  
  export async function getStaticProps({ params }) {
    const rawData = { /* 处理后的MDX数据 */ };
    // 用msgpack序列化压缩
    const serializedData = msgpack.encode(rawData);
    return { props: { data: serializedData } };
  }
  
  // 页面组件中反序列化
  export default function BlogPost({ data }) {
    const parsedData = msgpack.decode(data);
    // 渲染逻辑
  }
  

• 裁剪不必要的页面数据
  检查getStaticProps返回的props，移除页面组件不需要的字段。比如mdx-bundler返回的frontmatter可能包含多个字段，若页面只需要title、date、slug，就过滤掉其他字段：

  export async function getStaticProps({ params }) {
    const { frontmatter, code } = await bundleMDX({ /* ... */ });
    // 仅保留必要的元数据
    const trimmedMeta = {
      title: frontmatter.title,
      date: frontmatter.date,
      slug: params.slug
    };
    return { props: { meta: trimmedMeta, code } };
  }
  

内容的提问来源于stack exchange，提问作者faisal-akbar