Angular 5项目vendor包在Dev与Prod环境差异过大是否正常？

这完全是正常现象，不用太担心！Angular在开发和生产环境下的构建策略差异非常大，这直接导致了vendor包体积的悬殊，具体原因可以拆成这几点来看：

• 开发环境优先调试体验：当你用ng serve或者默认的ng build构建开发版本时，Angular不会做任何代码压缩、混淆操作，甚至会保留所有源码里的注释、可读性强的变量名，同时还会生成完整的source map文件（方便你在浏览器DevTools里直接调试原始TS代码）。这些都是为了让开发过程更顺畅，但也让vendor包体积膨胀得很明显。

• 生产环境极致优化代码：而用ng build --prod构建生产版本时，Angular会启动一整套优化流程：

  • 开启Tree Shaking：自动剔除vendor包中没有被你的项目实际用到的代码片段；
  • 启用AOT编译（Angular 5及以后默认开启）：提前把模板编译成JS，避免运行时编译的额外代码；
  • 代码压缩与混淆：把变量名改成短字符、移除所有空白和注释，大幅缩减文件体积；
  • 可能还会做代码分片、缓存优化等操作，进一步精简vendor包。

举个实际的例子：我见过不少Angular 5项目，开发环境下的vendor.js能达到5-8MB，而生产环境优化后可能只有800KB-1.5MB左右，这种量级的差异完全在预期范围内。

如果还是不确定，你可以对比一下两次构建的终端输出，生产构建的日志里会明确列出启用的优化项，比如AOT compilation enabled、Tree-shaking enabled这些提示，都能佐证这种体积差异是合理的。

内容的提问来源于stack exchange，提问作者Rami M. Nassar