小编典典

如何减小产品包大小?

all

我有一个简单的应用程序,由angular-cli.

它显示一些与 3 条路线相关的页面。我有 3 个组件。在这个页面的一个页面上,我使用lodashAngular 2 HTTP 模块来获取一些数据(使用
RxJS和Observable)。我使用简单的.map``subscribe``*ngFor

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

一些测试结果:

构建

哈希:8efac7d6208adb8641c1 时间:10129ms 块 {0} main.bundle.js, main.bundle.map
(main) 18.7 kB {3} [初始] [渲染]

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

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

块 {3} vendor.bundle.js,vendor.bundle.map(供应商)3.96 MB [初始] [渲染]

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

等等: 这样一个简单的应用程序需要 10Mb 的供应商捆绑包?

ng build –prod

哈希:09a5f095e33b2980e7cc 时间:23455ms 块 {0}
main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map
(main) 18.3 kB {3} [initial] [rendered]


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

块 {2}
scripts.c5b720a078e5464ec211.bundle.js,scripts.c5b720a078e5464ec211.bundle.map(脚本)128
kB {4} [初始] [渲染]

块 {3}
vendor.07af2467307e17d85438.bundle.js,vendor.07af2467307e17d85438.bundle.map(供应商)3.96
MB [初始] [渲染]

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

再等一下: prod 的供应商捆绑大小如此相似?

ng build --prod --aot

哈希:517e4425ff872bbe3e5b 时间:22856ms 块 {0} main.95eadbace554e3c2b43.bundle.js,
main.95eadbace554e3c2b43.bundle.map (main) 130 kB {3} [initial] [rendered]

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

块 {2}
scripts.e5c2c90547f3168a7564.bundle.js,scripts.e5c2c90547f3168a7564.bundle.map(脚本)128
kB {4} [初始] [渲染]

块 {3} vendor.41a6c1f57136df286f14.bundle.js,
vendor.41a6c1f57136df286f14.bundle.map(供应商)2.75 MB [初始] [渲染]

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

ng build --aot

哈希:040cc91df4df5ffc3c3f 时间:11011ms 块 {0} main.bundle.js, main.bundle.map
(main) 130 kB {3} [初始] [渲染]

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

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

块 {3} vendor.bundle.js,vendor.bundle.map(供应商)2.75 MB [初始] [渲染]

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

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

  • 为什么供应商捆绑包如此庞大?
  • 摇树是否被正确使用angular-cli
  • 如何提高这个捆绑包的大小?
  • 是否需要 .map 文件?
  • 捆绑包中是否包含测试功能?我在产品中不需要它们。
  • 一般问题:推荐的产品包装工具是什么?也许angular-cli(在后台使用 Webpack)不是最好的选择?我们能做得更好吗?

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


阅读 62

收藏
2022-08-20

共1个答案

小编典典

2020 年 2 月更新

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

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

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

您可以做一些事情来帮助提高应用程序的性能:

1) AOT & Tree Shaking(angular-cli 开箱即用)。使用 Angular 9,AOT 默认在 prod 和 dev 环境中。

2)使用Angular Universal AKA服务器端渲染(不在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

2022-08-20