如何在webpack生产构建中避免bn.js模块重复打包？

bn.js出现多份打包占用过高体积，通常是项目中多个依赖引入了不同版本bn.js，或webpack未抽离公共依赖导致同版本被打入多个chunk，可通过以下方案解决：

• 配置splitChunks抽离公共依赖
  webpack4内置的splitChunks可以将所有chunk中引用的公共模块抽离为单独的共享文件，配置示例如下：

// webpack.config.js
const path = require('path');
module.exports = {
  // 其余原有配置保持不变
  optimization: {
    splitChunks: {
      chunks: 'all', // 同时处理初始加载和异步加载的chunk
      cacheGroups: {
        // 通用配置：抽离所有node_modules依赖到公共vendor包
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          reuseExistingChunk: true // 复用已被抽离的模块，避免重复打包
        },
        // 针对性配置：单独抽离bn.js，优先级高于通用规则
        bnjs: {
          test: /[\\/]node_modules[\\/]bn\.js[\\/]/,
          name: 'bnjs',
          priority: 10,
          chunks: 'all'
        }
      }
    }
  }
}

• 配置resolve.alias强制统一bn.js引用路径
  如果是多版本bn.js导致的重复打包，可以通过alias指定所有对bn.js的导入都指向项目根目录安装的同一份文件：

// webpack.config.js
const path = require('path');
module.exports = {
  // 其余原有配置保持不变
  resolve: {
    alias: {
      'bn.js': path.resolve(__dirname, 'node_modules/bn.js')
    }
  }
}

注意：提前在项目根目录安装所有依赖兼容的bn.js版本，避免出现API不兼容问题。

• 包管理器层面锁定统一版本
  首先执行对应命令查看当前项目的bn.js依赖树，确认存在的版本数量：
  • npm用户执行：npm ls bn.js
  • yarn用户执行：yarn why bn.js
  • pnpm用户执行：pnpm ls bn.js
    确认多版本存在后，通过包管理器的版本覆盖功能强制所有依赖使用同一份bn.js：
  • yarn：在package.json中添加resolutions字段

  {
    "resolutions": {
      "bn.js": "^5.2.1" // 替换为你项目兼容的bn.js版本号
    }
  }
  

  • npm 8.3+/pnpm：在package.json中添加overrides字段

  {
    "overrides": {
      "bn.js": "^5.2.1"
    }
  }
  

配置完成后重新安装依赖，再执行生产构建即可验证优化效果。

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