angular - 如何减小产品包大小？

Question

我有一个简单的应用程序，由 angular-cli 初始化。

显示3条路由相关的页面。我有 3 个组件。在此页面之一上，我使用 lodash 和 Angular 2 HTTP 模块获取一些数据(使用 RxJS Observable、map 和 subscribe )。我使用简单的 *ngFor 显示这些元素。

但是，尽管我的应用程序非常简单，但我得到了一个巨大的(在我看来) bundle 和 map 。不过，我不谈论 gzip 版本，而是谈论 gzip 之前的大小。这个问题只是一个一般性的建议查询。

部分测试结果:

构建

Hash: 8efac7d6208adb8641c1 Time: 10129ms chunk {0} main.bundle.js, main.bundle.map (main) 18.7 kB {3} [initial] [rendered]

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 3.96 MB [initial] [rendered]

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

等等:如此简单的应用需要 10Mb 的 vendor bundle ？

ng 构建 --prod

Hash: 09a5f095e33b2980e7cc Time: 23455ms chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (main) 18.3 kB {3} [initial] [rendered]

chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (styles) 154 kB {4} [initial] [rendered]

chunk {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (scripts) 128 kB {4} [initial] [rendered]

chunk {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (vendor) 3.96 MB [initial] [rendered]

chunk {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (inline) 0 bytes [entry] [rendered]

再等一下:产品的 vendor bundle 大小如此相似？

ng build --prod --aot

Hash: 517e4425ff872bbe3e5b Time: 22856ms chunk {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3} [initial] [rendered]

chunk {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (styles) 154 kB {4} [initial] [rendered]

chunk {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (scripts) 128 kB {4} [initial] [rendered]

chunk {3} vendor.41a6c1f57136df286f14.bundle.js, vendor.41a6c1f57136df286f14.bundle.map (vendor) 2.75 MB [initial] [rendered]

chunk {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.map (inline) 0 bytes [entry] [rendered]

ng build --aot

Hash: 040cc91df4df5ffc3c3f Time: 11011ms chunk {0} main.bundle.js, main.bundle.map (main) 130 kB {3} [initial] [rendered]

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.75 MB [initial] [rendered]

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

关于在产品上部署我的应用程序的几个问题:

• 为什么 vendor bundle 如此庞大？
• angular-cli 是否正确使用了 tree shaking？
• 如何改进这个包的大小？
• 是否需要 .map 文件？
• bundle 中是否包含测试功能？我在产品中不需要它们。
• 一般性问题:为产品打包的推荐工具是什么？也许 angular-cli(在后台使用 Webpack)不是最好的选择？我们可以做得更好吗？

我在 Stack Overflow 上搜索了很多讨论，但没有找到任何通用问题。

Answer 1

2020 年 2 月更新

由于这个答案有很大的吸引力，我认为最好用更新的 Angular 优化来更新它:

1. 正如另一位回答者所说，ng build --prod --build-optimizer 对于使用低于 Angular v5 的人来说是一个不错的选择。对于较新的版本，这是默认使用 ng build --prod
完成的
2. 另一种选择是使用模块分块/延迟加载来更好地将您的应用程序分成更小的 block
3. Ivy 渲染引擎在 Angular 9 中默认提供，它提供了更好的包大小
4. 确保您的第 3 方部门是 tree shakable。如果你还没有使用 Rxjs v6，你应该是。
5. 如果一切都失败了，使用像webpack-bundle-analyzer这样的工具看看是什么导致你的模块膨胀
6. 检查你的文件是否压缩过

---

一些人声称使用 AOT 编译可以将 vendor 包的大小减少到 250kb。然而，在 BlackHoleGalaxy 的示例中，他使用了 AOT 编译，并且使用 ng build --prod --aot 仍然留下 2.75MB 的 vendor 包大小，比假设的 250kb 大 10 倍。这对于 angular2 应用程序来说并非不正常，即使您使用的是 v4.0。对于真正关心性能的人来说，2.75MB 仍然太大了，尤其是在移动设备上。

您可以采取一些措施来提高应用程序的性能:

1. AOT 和 Tree Shaking(angular-cli 开箱即用)。对于 Angular 9，AOT 默认情况下在生产和开发环境中。

2. 使用 Angular Universal A.K.A.服务器端渲染(不在 cli 中)

3. Web Workers(同样，不是在 cli 中，而是一个非常需要的功能)
   参见:https://github.com/angular/angular-cli/issues/2305

4. 服务人员
   参见:https://github.com/angular/angular-cli/issues/4006

您可能不需要在单个应用程序中使用所有这些，但这些是当前用于优化 Angular 性能的一些选项。我相信/希望谷歌意识到性能方面的现成缺陷，并计划在未来改进这一点。

这是一个更深入地讨论我上面提到的一些概念的引用:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294