从Angular 15升级至17后bundle体积大幅增加的问题咨询

以下是可能导致体积增长的常见原因及排查方向：

• 构建配置变更：Angular 17 默认启用了 application 构建模式（替代原 browser 模式），同时可能调整了默认的优化参数。对比升级前后 angular.json 中 architect.build.configurations.production 下的 buildOptimizer、optimization、vendorChunk 等配置，确保生产构建的优化策略一致。

• 依赖体积变化：Angular 核心库或第三方依赖在版本升级后本身体积有所增加。执行 ng build --configuration production --stats-json 生成构建统计文件，再用 npx webpack-bundle-analyzer dist/[项目目录]/stats.json 分析具体模块的体积变化，定位增长来源。

• Standalone 模式冗余：如果升级后转向 Standalone 组件，可能存在重复导入 provider、模块的情况，比如多次调用 provideHttpClient() 或重复导入共享组件，导致代码冗余。检查组件的导入语句和 provider 配置，清理重复项。

• Tree Shaking 失效：部分第三方库的 ES 模块导出不规范，或者代码中存在无法被 Tree Shaken 的副作用代码，导致未使用的代码被打包。检查第三方库的 package.json 中 sideEffects 字段是否正确标记，避免不必要的代码被保留。

• Ivy 运行时更新：Angular 17 对 Ivy 运行时做了功能迭代，可能引入少量新增代码，但通常不会导致 141KB 的大幅增长。可以对比升级前后 runtime.js 的体积，确认是否为该部分导致。

排查步骤建议：

1. 对比升级前后的 angular.json 构建配置，确保生产环境的优化参数未被意外修改
2. 生成并分析构建统计文件，定位具体增长的模块或依赖
3. 尝试回退部分第三方依赖到 Angular 15 时的版本，验证体积变化
4. 检查 Standalone 组件的导入和 provider 配置，清理冗余代码

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