Angular生产构建后dist文件夹生成超3000个.js文件相关问题咨询

成因说明 #

1. 默认分块策略过度拆分：Angular 12+之后默认启用更细粒度的代码分割规则，独立组件、懒加载模块、第三方依赖的子包都会被拆成单独的chunk，当项目依赖较多、懒加载拆分粒度过小时，就会产生大量小于4KB的细碎文件。
2. 双编译输出：如果开启了ES5/ES2015双版本兼容输出，所有JS文件都会生成两份，直接让文件数量翻倍。
3. 预编译产物复用：你看到的修改日期更早的小文件，是Angular构建时复用的未改动第三方依赖预编译块、增量构建缓存产物，这部分内容没有发生变化所以不会重新生成，因此保留了更早的修改时间。
4. 额外生成文件：如果开启了生产环境sourceMap、关闭了资源内联规则，也会额外生成大量.map文件、独立的静态资源文件。

解决方法 #

• 调整代码分割策略
  在angular.json的生产构建配置中修改优化规则，合并细碎chunk：

  {
    "projects": {
      "your-project": {
        "architect": {
          "build": {
            "configurations": {
              "production": {
                "optimization": true,
                "commonChunk": true,
                "namedChunks": false,
                "buildOptimizer": true,
                "vendorChunk": false
              }
            }
          }
        }
      }
    }
  }
  

  如果使用自定义Webpack配置，可以新增splitChunks规则，设置最小chunk大小为10KB，所有小于该阈值的chunk都会被合并到公共块中：

  module.exports = {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 10 * 1024,
        maxAsyncRequests: 20,
        maxInitialRequests: 30
      }
    }
  }
  

  同时不要对关联度高的独立组件单独设置懒加载，合并为功能模块后统一懒加载，进一步减少chunk数量。
• 关闭ES5兼容输出
  目前全球主流浏览器均已支持ES2015+语法，可在tsconfig.json中将target设置为ES2020，同时删除polyfills.ts中的ES5兼容垫片，关闭双输出，直接减少一半文件量。
• 关闭不必要的生成文件
  生产环境默认关闭sourceMap即可，如果需要线上调试可仅生成行映射的sourceMap，避免生成全量.map文件。
• 调整Service Worker缓存规则
  在ngsw-config.json中修改缓存策略，将第三方依赖、静态资源等不常变更的文件分到单独缓存组，设置更新策略为performance，仅当文件hash发生变化时才更新缓存，避免全量校验下载所有文件。

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