我有一个简单的应用程序,由angular-cli.
angular-cli
它显示一些与 3 条路线相关的页面。我有 3 个组件。在这个页面的一个页面上,我使用lodashAngular 2 HTTP 模块来获取一些数据(使用 RxJS和Observable)。我使用简单的.map``subscribe``*ngFor
lodash
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]
哈希: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]
哈希: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]
哈希: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]
哈希:040cc91df4df5ffc3c3f 时间:11011ms 块 {0} main.bundle.js, main.bundle.map (main) 130 kB {3} [初始] [渲染]
块 {3} vendor.bundle.js,vendor.bundle.map(供应商)2.75 MB [初始] [渲染]
所以有几个关于在产品上部署我的应用程序的问题:
我在 Stack Overflow 上搜索了很多讨论,但没有找到任何通用问题。
2020 年 2 月更新
由于这个答案有很大的吸引力,我认为最好用更新的 Angular 优化来更新它:
ng build --prod --build-optimizer
ng build --prod
有人声称使用 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