Next.js中使用createGlobalStyle导致payload突增10MB问题求助

核心原因 #

你的200KB字体导致站点payload暴涨10MB，根本原因不是字体本身，而是组件库打包配置错误或Next.js引入时的tree-shaking失效，导致大量无关代码/资源被意外加载：

1. Rollup未正确分离外部依赖与资源
   如果Rollup配置里没把styled-components这类第三方依赖标记为外部依赖，也没正确处理字体等静态资源，会把styled-components的完整代码、甚至组件库中其他所有组件的代码都打包进导出GlobalStyle的模块里。业务项目引入GlobalStyle时，就会加载这些额外的冗余代码，直接推高payload。

2. 组件库输出格式不支持tree-shaking
   若组件库只输出CommonJS格式的代码，Next.js的tree-shaking机制会失效——哪怕你只引入GlobalStyle，也会被迫加载整个组件库的所有代码和资源，这是导致体积暴涨到10MB的最常见场景。

3. 字体资源被错误内联+重复打包
   如果Rollup插件（比如@rollup/plugin-url）配置错误，把字体转成base64内联到CSS中，同时组件库存在多处引用该字体的情况，或者插件误内联了其他大资源，会进一步放大体积（不过200KB字体转base64仅约267KB，通常是伴随其他问题共同导致10MB的结果）。

解决步骤 #

1. 修正Rollup配置，分离外部依赖
   在Rollup配置中把第三方依赖标记为外部，避免打包进组件库，同时输出ES模块格式以支持tree-shaking：

   export default {
     // ...其他配置
     external: ['styled-components'],
     output: {
       format: 'esm',
       dir: 'dist',
       preserveModules: true // 保留模块结构，帮助Next.js精准tree-shaking
     }
   };
   

2. 正确处理字体资源，避免内联
   使用@rollup/plugin-url或rollup-plugin-copy将字体复制到组件库输出目录，而非内联：

   import url from '@rollup/plugin-url';
   
   export default {
     plugins: [
       url({
         include: ['**/*.ttf'],
         limit: 0, // 禁止内联，所有字体文件复制到指定目录
         destDir: 'dist/fonts'
       })
     ]
   };
   

3. 用打包分析工具定位冗余
   在业务项目中启用@next/bundle-analyzer插件，可视化分析打包后的chunk，精准找到10MB体积的来源，确认是哪些冗余代码/资源被意外引入。

内容的提问来源于stack exchange，提问作者bezzoon