Angular 8升级后项目构建包从12MB增至90MB问题排查求助

1. 调整构建命令的明确性 #

从Angular 9开始，--prod标记的默认优化逻辑有调整，部分核心优化选项可能未自动生效。建议替换为更明确的构建命令：

node pre-build && node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration production --build-optimizer --outputHashing=all --aot --optimization

强制开启--aot（预编译）和--optimization（代码压缩、摇树优化），这两个是控制生产包体积的核心选项。

2. 定位体积膨胀的具体模块 #

用Angular CLI生成构建统计文件，分析产物组成：

ng build --configuration production --stats-json

生成stats.json后，用本地工具解析可视化：

npx webpack-bundle-analyzer dist/[你的项目目录]/stats.json

通过可视化结果快速定位是第三方依赖、冗余业务代码还是静态资源导致的体积暴增。

3. 检查第三方依赖的摇树支持 #

• 确认升级后的依赖是否支持ES模块（ESM）：查看依赖包package.json中的module字段，CommonJS模块无法被有效摇树，会导致完整打包。
• 针对体积大的库（如lodash、moment.js），改用按需导入：比如用lodash-es替代lodash，或直接导入单个方法import { debounce } from 'lodash-es'。

4. 校验angular.json生产配置 #

打开angular.json，确保production配置项的优化参数正确：

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      }
    ]
  }
}

重点确认sourceMap为false（生产环境不需要源码映射，会大幅减少体积）、vendorChunk为false（避免重复打包依赖）。

5. 清理冗余内容 #

• 卸载项目中不再使用的依赖包：npm uninstall [冗余包名]
• 删除未使用的组件、模块、服务，开启TypeScript的noUnusedLocals、noUnusedParameters选项，自动检测未使用代码。

6. 排查pre-build脚本影响 #

确认node pre-build脚本是否执行了增加体积的操作：比如复制了不必要的静态资源、引入额外模块，或修改了构建配置导致优化失效。

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