如何在Next.js中配置Webpack以避免共享文件的代码块重复打包？

嘿，我来帮你分析下这个问题。你遇到的情况其实是Tree Shaking未完全生效，同时Webpack的SplitChunks配置不够精细，导致共享的utils模块被重复打包进了两个页面的chunk里。虽然你已经加了"sideEffects": false和splitChunks.chunks = "all"，但还需要补充一些配置才能达到预期效果，我给你一步步拆解解决方案：

1. 先确保Tree Shaking的基础条件都满足 #

Tree Shaking（摇树优化）只对ES模块生效，而且需要明确标记无副作用的代码：

• 你已经用了export/import的ES模块语法，这没问题，但要注意如果有自定义Babel配置，别把ES模块转成CommonJS（比如不要设置@babel/preset-env的modules: 'commonjs'），否则Tree Shaking会失效。
• 你的"sideEffects": false配置是对的，但如果项目里有样式文件这类有副作用的资源，最好更精准地指定：

  "sideEffects": ["*.css", "*.scss"]
  

  这样能明确告诉Webpack，除了样式文件外，其他JS文件都没有副作用，可以安全地摇掉未使用的代码。

2. 优化Webpack的SplitChunks配置 #

你当前只设置了splitChunks.chunks = "all"，但需要添加自定义缓存组来精准处理utils这类共享模块，避免重复打包。修改你的Next.js配置如下：

const nextConfig = {
  webpack: (config, { isServer }) => {
    // 开启对所有chunk的拆分
    config.optimization.splitChunks.chunks = "all";
    // 确保开启usedExports，让Webpack识别未使用的导出（Next.js生产模式默认开启，但可以显式指定）
    config.optimization.usedExports = true;
    // 添加自定义缓存组，抽离utils模块
    config.optimization.splitChunks.cacheGroups = {
      utils: {
        test: /[\\/]utils[\\/]/, // 匹配utils目录下的文件
        name: "utils", // 抽离后的chunk名称
        chunks: "all",
        enforce: true, // 强制抽离，哪怕文件很小
        minSize: 0, // 不限制最小文件大小，确保小模块也能被抽离
      },
      // 保留Next.js默认的缓存组，避免覆盖原有优化逻辑
      ...config.optimization.splitChunks.cacheGroups,
    };
    return config;
  },
};

这个配置会把utils目录下的模块单独抽离成一个名为utils的chunk，而不是重复打包到ComponentA和ComponentB的chunk里。同时，usedExports会让Webpack标记出每个模块里未被使用的导出，配合Tree Shaking去掉无用代码。

3. 确认是在生产模式下构建 #

注意：Tree Shaking和SplitChunks的大部分优化只在生产模式生效！开发模式下Webpack为了加快构建速度，会关闭这些优化，所以你一定要用next build命令构建后再检查打包结果，而不是next dev的开发环境。

4. 验证打包结果（可选但推荐） #

你可以用Next.js的打包分析工具来直观查看chunk内容：

1. 安装依赖：npm install @next/bundle-analyzer --save-dev
2. 修改nextConfig添加分析配置：

   const withBundleAnalyzer = require('@next/bundle-analyzer')({
     enabled: process.env.ANALYZE === 'true',
   })
   module.exports = withBundleAnalyzer(nextConfig)
   

3. 执行ANALYZE=true next build，会自动打开浏览器展示打包分析图，你可以清楚看到每个chunk包含的内容，确认funcA和funcB没有被重复打包。

另外，还有个小建议：如果你的utils里有多个独立的函数，最好把每个函数单独放在一个文件里（比如utils/funcA.js、utils/funcB.js），这样Webpack可以更轻松地做Tree Shaking，不需要依赖复杂的配置，这也是代码拆分的最佳实践之一。

备注：内容来源于stack exchange，提问作者Aryan Mehrabi