Angular 10搭配Webpack 4配置splitChunks maxSize出现重复chunk如何解决

问题根因分析 #

你开启maxSize后出现重复chunk的核心原因有两个：

• 原有vendor缓存组按单个npm包拆分chunk，开启强制拆包后没有规范拆分包的命名和合并规则，webpack会自动生成随机ID的chunk，相同内容也会被判定为不同资源
• minSize设为0会强制拆分所有极小依赖，大量几KB的chunk没有合并逻辑，很容易出现内容完全一致的重复包
  另外入口文件./angular/main.ts体积超标，大概率是业务模块没有启用懒加载，所有同步模块的代码都被打包到了入口文件中。

优化后的splitChunks配置 #

splitChunks: {
  chunks: "all",
  minSize: 20000, // 小于20KB的资源不单独拆包，避免过多请求开销
  maxSize: 300000, // 300KB拆包阈值，可按需调整，不会产生重复chunk
  maxInitialRequests: 30, // 不要设为Infinity，浏览器并行请求数有上限，30足够覆盖正常场景
  maxAsyncRequests: 30,
  cacheGroups: {
    // 抽离几乎不会变动的Angular核心依赖，缓存周期最长
    angularCore: {
      test: /[\\/]node_modules[\\/](@angular|rxjs|zone\.js)[\\/]/,
      name: 'angular-core',
      priority: 40,
      chunks: 'all',
      reuseExistingChunk: true
    },
    // 单独抽离项目中用到的大型第三方依赖，比如UI组件库、图表库等
    largeVendors: {
      test: /[\\/]node_modules[\\/](echarts|@angular-material|ng-zorro-antd)[\\/]/, // 替换为你项目中的大型依赖
      name(module) {
        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
        return `lib.${packageName.replace('@', '')}`;
      },
      priority: 30,
      chunks: 'all',
      reuseExistingChunk: true
    },
    // 剩余通用第三方依赖统一打包，避免单个小依赖生成大量碎包
    commonVendors: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors-common',
      priority: 20,
      chunks: 'all',
      reuseExistingChunk: true,
      minChunks: 2 // 至少被2个模块引用才抽离，避免单次引用的依赖进入公共包
    },
    // 抽离业务公共代码：公共组件、工具类、通用服务等
    commonBusiness: {
      test: /[\\/]src[\\/](app[\\/]shared|utils|services)[\\/]/, // 替换为你项目的公共目录
      name: 'business-common',
      priority: 10,
      chunks: 'all',
      reuseExistingChunk: true,
      minChunks: 2
    },
    // 修复原有appversion配置的空name问题，避免随机ID生成重复chunk
    appversion: {
      test: /app\.service\.ts/,
      name: 'app-version',
      chunks: 'all',
      priority: 50,
      reuseExistingChunk: true
    }
  }
}

必做的Angular专项优化 #

• 所有业务模块启用路由懒加载，Angular默认会为每个懒加载模块生成独立chunk，修改单个模块只会变更对应chunk的哈希值，用户更新时仅需下载这个变更的小chunk，完全符合你的需求
• 生产打包开启全量优化，执行命令：ng build --prod --build-optimizer --aot，AOT编译和构建优化器会自动剔除无用代码，整体体积至少降低30%
• 调整Service Worker配置，不要全量预缓存所有chunk，仅预缓存首屏所需的核心资源，其他懒加载模块chunk在用户访问时再下载，大幅降低新版本Service Worker安装时的下载量

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