求助：ng build --prod打包体积远超ng serve --prod的原因

碰到过好几个Angular 5+项目出现这个问题，我来帮你理清楚可能的原因和解决办法：

1. DevTools显示的是压缩后体积，本地build文件是原始体积 #

这是最容易踩的坑：

• ng serve --prod 启动的开发服务器会自动对静态资源做gzip压缩，Chrome DevTools的Network面板里显示的是压缩后的传输体积（通常是原始minified文件的1/3到1/5）。
• 而ng build --prod生成的main.js是经过minify但未做gzip的原始文件，你看到的5.3MB是它的真实本地大小——但部署到服务器后，如果服务器开启了gzip/brotli压缩，实际传到浏览器的体积会和你在ng serve时看到的差不多。

验证&解决：

• 拿本地build好的main.js用gzip工具压缩一下，看看压缩后的体积是不是和DevTools里显示的数值接近。
• 部署服务器时，务必开启静态资源压缩（比如Nginx配置gzip on，并设置合适的压缩类型）。

2. Angular CLI 1.7.x的构建优化策略差异 #

在Angular CLI 1.x版本中，ng serve --prod和ng build --prod的优化逻辑有细微区别：

• ng serve为了提升构建速度，会跳过一些深度优化步骤（比如部分tree shaking规则、重复依赖检测）。
• 而ng build --prod会执行完整的生产构建，但如果你的项目里引入了CommonJS格式的依赖包，Angular 5的tree shaking对这类包的支持很差，会导致整个依赖被完整打包进main.js，直接撑大体积。

解决办法：

• 检查package.json里的依赖，尽量替换成支持ES模块格式的包（看依赖是否包含module字段）。
• 手动加上--build-optimizer=true参数，执行ng build --prod --aot=true --build-optimizer=true，这个参数在CLI 1.7.x中默认可能没有完全启用，能进一步压缩bundle体积。

3. 懒加载模块配置错误 #

如果项目里有懒加载模块，但路由配置不对，ng build --prod会把所有懒加载模块都打包进main.js；而ng serve时因为路由懒加载的特性，这些模块不会被提前加载，所以DevTools里的main.bundle体积看起来小很多。

检查方式：

• 确认路由配置里的懒加载模块是用loadChildren: './path/to/module#ModuleName'的方式引入，而不是直接用import导入模块。
• 执行ng build --prod --stats-json生成stats.json文件，用webpack-bundle-analyzer分析bundle内容，就能直观看到哪些大依赖被塞进了main.js。

4. 残留的冗余代码或依赖 #

项目里残留的测试文件（比如.spec.ts）、未使用的第三方库，可能在ng serve时被开发服务器过滤，但ng build --prod会把它们打包进去（如果配置不当）。

解决办法：

• 检查.angular-cli.json（CLI 1.x的配置文件）里的exclude字段，确保测试文件和无用文件被排除在构建范围外。
• 用npm ls或webpack-bundle-analyzer排查项目依赖，移除那些没在代码里用到的第三方库。

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