Next.js初始JavaScript请求过多问题求助

首先明确：开发环境和生产环境的Chunk拆分逻辑本来就不同——开发环境为了热更新效率会合并大Chunk，而生产环境默认按路由、组件拆分来实现按需加载，但这种策略对结构简单的网站可能会过度拆分，导致大量小请求，这不是你操作有误，调整配置就能优化。

给你几个具体的优化方向：

• 调整Webpack的SplitChunks配置
  在next.config.js里自定义webpack配置，修改拆分规则来合并小Chunk：

  module.exports = {
    webpack: (config, { isServer }) => {
      if (!isServer) {
        config.optimization.splitChunks = {
          chunks: 'all',
          minSize: 30000, // 调大拆分的最小体积（默认20KB），合并更多小文件
          minChunks: 1,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              chunks: 'all',
              priority: -10
            },
            common: {
              name: 'common',
              minChunks: 2,
              chunks: 'all',
              priority: -20,
              reuseExistingChunk: true
            }
          }
        };
      }
      return config;
    }
  };
  

  可以根据实际情况调整minSize数值，比如改成50000（50KB），把更多小Chunk合并成一个。

• 减少不必要的动态导入
  如果你用了很多dynamic()来导入小型组件，会生成大量独立Chunk。把关联的小组件合并到同一个动态导入里，或者对非必要的动态导入直接改成静态导入——毕竟你的网站结构简单，不需要过度拆分。

• 统一第三方依赖的Chunk
  有些第三方库本身会被拆分成多个小模块，通过上面的cacheGroups.vendor配置，可以把大部分第三方依赖合并到vendors.js里，减少请求数。

• 关闭不必要的实验性优化
  如果你的next.config.js里开启了experimental.optimizePackageImports之类的实验性选项，可能会导致更细的Chunk拆分，不需要的话可以直接关闭。

测试的时候记得用next build && next start来验证生产环境的效果，不要用开发环境测试。

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