如何减小产品捆束尺寸? [英] How to decrease prod bundle size?

查看：34
本文介绍了如何减小产品捆束尺寸?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a simple app, initialized by angular-cli.

它显示一些与3条路线有关的页面.我有3个组成部分.在本页的其中一个中，我使用lodash和Angular 2 HTTP模块来获取一些数据(使用RxJS Observable s，map和subscribe).我使用简单的*ngFor显示这些元素.

It display some pages relative to 3 routes. I have 3 components. On one of this page I use lodash and Angular 2 HTTP modules to get some data (using RxJS Observables, map and subscribe). I display these elements using a simple *ngFor.

但是，尽管事实上我的应用程序非常简单，但我还是得到了巨大的捆绑包和地图.我不是在谈论gzip版本，而是gzip压缩之前的大小.这个问题只是一般性的建议查询.

But, despite the fact my app is really simple, I get a huge (in my opinion) bundle package and maps. I don't talk about gzip versions though but size before gzipping. This question is just a general recommendations inquiry.

一些测试结果:

ng构建

哈希:8efac7d6208adb8641c1时间:10129ms块{0} main.bundle.js， main.bundle.map(主)18.7 kB {3} [初始] [呈现]

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

块{1} styles.bundle.css，styles.bundle.map，styles.bundle.map (样式)155 kB {4} [初始] [渲染]

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

块{2} scripts.bundle.js，scripts.bundle.map(脚本)128 kB {4} [初始] [呈现]

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

块{3} vendor.bundle.js，vendor.bundle.map(供应商)3.96 MB [初始] [呈现]

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

块{4} inline.bundle.js，inline.bundle.map(inline)0字节 [输入] [呈现]

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

等待: 10Mb的供应商捆绑包是否适用于如此简单的应用程序?

ng build --prod

ng build --prod

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

Hash: 09a5f095e33b2980e7cc Time: 23455ms chunk {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(样式)154 kB {4} [initial] [呈现]

chunk {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} [initial] [呈现]

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(供应商)3.96 MB [初始] [呈现]

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

块{4} inline.a345391d459797f81820.bundle.js， inline.a345391d459797f81820.bundle.map(inline)0字节[输入] [呈现]

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

再次等待:与产品类似的供应商捆绑包大小吗? 

ng build --prod --aot

哈希:517e4425ff872bbe3e5b时间:22856ms块{0} main.95eadabace554e3c2b43.bundle.js， main.95eadabace554e3c2b43.bundle.map(主要)130 kB {3} [initial] [呈现]

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

块{1}样式.e53a388ae1dd2b7f5434.bundle.css， styles.e53a388ae1dd2b7f5434.bundle.map， styles.e53a388ae1dd2b7f5434.bundle.map(样式)154 kB {4} [initial] [呈现]

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

大块{2}脚本.e5c2c90547f3168a7564.bundle.js， scripts.e5c2c90547f3168a7564.bundle.map(脚本)128 kB {4} [initial] [呈现]

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

大块{3} vendor.41a6c1f57136df286f14.bundle.js， vendor.41a6c1f57136df286f14.bundle.map(供应商)2.75 MB [初始] [呈现]

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

块{4} inline.97c0403c57a46c6a7920.bundle.js， inline.97c0403c57a46c6a7920.bundle.map(inline)0字节[输入] [呈现]

chunk {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(主)130 kB {3} [初始] [渲染]

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

块{1} styles.bundle.css，styles.bundle.map，styles.bundle.map (样式)155 kB {4} [初始] [渲染]

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

块{2} scripts.bundle.js，scripts.bundle.map(脚本)128 kB {4} [初始] [呈现]

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

块{3} vendor.bundle.js，vendor.bundle.map(供应商)2.75 MB [初始] [呈现]

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

块{4} inline.bundle.js，inline.bundle.map(inline)0字节 [输入] [呈现]

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

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

So a few questions for deploying my app on prod:

  • 为什么供应商捆绑如此庞大?
  • angular-cli是否正确使用了摇树?
  • 如何提高捆绑商品的尺寸?
  • 是否需要.map文件?
  • 捆绑包中是否包含测试功能?我不需要产品.
  • 通用问题:推荐用于产品包装的工具是什么?也许angular-cli(在后台使用Webpack)不是最好的选择?我们可以做得更好吗?
  • Why are the vendor bundles so huge?
  • Is tree shaking properly used by angular-cli?
  • How to improve this bundle size?
  • Are the .map files required?
  • Are the testing features included in bundles? I don't need them in prod.
  • Generic question: what are the recommanded tools to pack for prod? Maybe angular-cli (using Webpack in the background) is not the best option? Can we do better?

我搜索了很多有关堆栈溢出的讨论，但没有发现任何一般性问题.

I searched many discussions on Stack Overflow, but I haven't found any generic question.

推荐答案

2020年2月更新

由于这个答案吸引了很多人，我认为最好使用更新的Angular优化来更新它:

Since this answer got a lot of traction, I thought it would be best to update it with newer Angular optimizations:

  1. 正如另一位回答者所说，ng build --prod --build-optimizer对于使用少于Angular v5的用户来说是一个不错的选择.对于较新的版本，默认情况下是使用ng build --prod
    2. 完成的
  2. 另一种选择是使用模块分块/延迟加载，以更好地将您的应用程序分成较小的块
  3. 默认情况下，Angular 9中提供了常春藤渲染引擎，它提供了更好的捆绑包大小
  4. 确保您的第三方部门可摇动树木.如果您尚未使用Rxjs v6，则应该使用.
  5. 如果所有其他方法均失败，请使用 webpack-bundle-analyzer 之类的工具来查看在您的模块中引起肿胀
  6. 检查文件是否被压缩
  1. As another answerer said, ng build --prod --build-optimizer is a good option for people using less than Angular v5. For newer versions, this is done by default with ng build --prod
  2. Another option is to use module chunking/lazy loading to better split your application into smaller chunks
  3. Ivy rendering engine comes by default in Angular 9, it offers better bundle sizes
  4. Make sure your 3rd party deps are tree shakeable. If you're not using Rxjs v6 yet, you should be.
  5. If all else fails, use a tool like webpack-bundle-analyzer to see what is causing bloat in your modules
  6. Check if you files are gzipped

有人声称使用AOT编译可以将供应商捆绑包大小减小到250kb.但是，在BlackHoleGalaxy的示例中，他使用AOT编译，并且仍然剩下2.75MB的供应商捆绑包，ng build --prod --aot，比预期的250kb大10倍.即使您使用的是v4.0，这也不是angular2应用程序的常识.对于真正关心性能的人(尤其是在移动设备上)而言，2.75MB的容量仍然太大.

Some claims that using AOT compilation can reduce the vendor bundle size to 250kb. However, in BlackHoleGalaxy's example, he uses AOT compilation and is still left with a vendor bundle size of 2.75MB with ng build --prod --aot, 10x larger than the supposed 250kb. This is not out of the norm for angular2 applications, even if you are using v4.0. 2.75MB is still too large for anyone who really cares about performance, especially on a mobile device.

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

There are a few things you can do to help the performance of your application:

1)AOT&摇树(angular-cli开箱即用).在生产和开发环境中，默认情况下使用Angular 9 AOT.

1) AOT & Tree Shaking (angular-cli does this out of the box). With Angular 9 AOT is by default on prod and dev environment.

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

2) Using Angular Universal A.K.A. server-side rendering (not in cli)

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

3) Web Workers (again, not in cli, but a very requested feature)
see: https://github.com/angular/angular-cli/issues/2305

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

4) Service Workers
see: https://github.com/angular/angular-cli/issues/4006

您可能不需要在单个应用程序中全部使用这些功能，但是这些是当前用于优化Angular性能的一些选项.我相信/希望Google在性能方面意识到开箱即用的缺点，并计划在未来进行改进.

You may not need all of these in a single application, but these are some of the options that are currently present for optimizing Angular performance. I believe/hope Google is aware of the out of the box shortcomings in terms of performance and plans to improve this in the future.

这里有一个参考，对我上面提到的一些概念进行了更深入的讨论:

Here is a reference that talks more in depth about some of the concepts i mentioned above:

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

这篇关于如何减小产品捆束尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆