如何减少纤束尺寸？

Question

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

它显示了一些相对于3条路径的页面。我有三个部件。在本页面的一个页面中，我使用lodash和Range2HTTP模块获取一些数据(使用RxJS Observables、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 (样式) 155 kB {4}初始值 块{2} scripts.bundle.js，scripts.bundle.map (脚本) 128 kB {4}初始值 块{3} vendor.bundle.js，vendor.bundle.map (供应商)3.96MB初始 块{4} inline.bundle.js，inline.bundle.map (内联)0字节条目

等待：10 app供应商包用于这样一个简单的应用程序？

吴建民

散列: 09a5f095e33b2980e7cc时间: 23455ms块{0} main.6273b0f04a07a1c2ad6c.bundle.js，main.6273b0f04a07a1c2ad6c.bundle.map (main) 18.3 kB {3}初始值 区块{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css，styles.bfdaa4d8a4eb2d0cb019.bundle.map，styles.bfdaa4d8a4eb2d0cb019.bundle.map (样式) 154 kB {4}初始值 块{2} scripts.c5b720a078e5464ec211.bundle.js，scripts.c5b720a078e5464ec211.bundle.map (脚本) 128 kB {4}初始值 块{3} vendor.07af2467307e17d85438.bundle.js，vendor.07af2467307e17d85438.bundle.map (供应商)3.96MB初始 块{4} inline.a345391d459797f81820.bundle.js，inline.a345391d459797f81820.bundle.map (内联)0字节条目

再次等待：为prod?提供了类似的供应商包大小。

ng build --prod --aot

散列: 517e4425ff872bbe3e5b时间: 22856ms块{0} main.95eadabace554e3c2b43.bundle.js，main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3}初始值 区块{1} styles.e53a388ae1dd2b7f5434.bundle.css，styles.e53a388ae1dd2b7f5434.bundle.map，styles.e53a388ae1dd2b7f5434.bundle.map (样式) 154 kB {4}初始值 块{2} scripts.e5c2c90547f3168a7564.bundle.js，scripts.e5c2c90547f3168a7564.bundle.map (脚本) 128 kB {4}初始值 块{3} vendor.41a6c1f57136df286f14.bundle.js，vendor.41a6c1f57136df286f14.bundle.map (供应商)2.75MB初始 块{4} inline.97c0403c57a46c6a7920.bundle.js，inline.97c0403c57a46c6a7920.bundle.map (内联)0字节条目

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 (样式) 155 kB {4}初始值 块{2} scripts.bundle.js，scripts.bundle.map (脚本) 128 kB {4}初始值 块{3} vendor.bundle.js，vendor.bundle.map (供应商)2.75MB初始 块{4} inline.bundle.js，inline.bundle.map (内联)0字节条目

因此，关于在prod上部署我的应用程序的几个问题：

• 为什么供应商包这么大？
• angular-cli是否正确地使用了树抖？
• 如何提高这个包的大小？
• 是必需的.map文件吗？
• 测试特性是否包含在包中？我不需要他们的刺激。
• 一般问题:需要打包的工具是什么？也许angular-cli (在后台使用Webpack )不是最好的选择吗？我们能做得更好吗？

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

Answer 1

更新2020年2月

由于这个答案有很大的吸引力，所以我认为最好用新的角度优化来更新它：

1. 正如另一位回答者说的那样，对于使用小于角度v5的人来说，v5是一个很好的选择。对于较新的版本，默认情况下这是用ng build --prod完成的。
2. 另一种选择是使用模块块/延迟加载来更好地将应用程序分割成更小的块。
3. 常春藤渲染引擎默认为角9，它提供更好的捆绑大小。
4. 确保你的第三方道具是树的摇动。如果您还没有使用Rxjs v6，那么您应该使用Rxjs。
5. 如果所有这些都失败了，请使用像webpack束分析仪这样的工具来查看是什么导致模块膨胀的。
6. 检查您的文件是否已压缩。

有人声称使用AOT编译可以将供应商包的大小减少到250 to。然而，在BlackHoleGalaxy的示例中，他使用了AOT编译，仍然有一个2.75MB的ng build --prod --aot供应商包大小，比假定的250 he大10倍。即使您使用的是v4.0，对于angular2应用程序来说，这也是不正常的。对于任何真正关心性能的人来说，2.75MB还是太大了，尤其是在移动设备上。

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

1. AOT & Tree摇动(角-cli是从盒子里做的)。在prod和dev环境中，默认情况下AOT使用角为9。
2. 使用角通用A.K.A.服务器端呈现(不在cli中)
3. Workers (同样不是在cli中，而是一个非常需要的特性) 请参阅：https://github.com/angular/angular-cli/issues/2305
4. 服务工作者 请参阅：https://github.com/angular/angular-cli/issues/4006

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

这里有一个参考文献，更深入地讨论了我前面提到的一些概念：

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

Answer 2

使用最新的角cli版本，并使用命令ng构建- prod -构建优化器，它肯定会减少的prod的构建大小。

这是构建优化器在引擎盖下所做的工作：

构建优化器有两个主要任务。首先，我们能够将应用程序的部分标记为纯的，这改进了现有工具提供的树抖动，删除了应用程序中不需要的其他部分。

构建优化器所做的第二件事是从应用程序的运行时代码中删除角装饰器。修饰器由编译器使用，在运行时不需要，可以删除。这些任务中的每一个都减少了JavaScript包的大小，并提高了应用程序对用户的引导速度。

Note：角5及以上的一次更新，ng build --prod自动处理上述过程:)

Answer 3

根据导入的方式，Lodash可以为您的包贡献一个bug代码块。例如：

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

就我个人而言，我仍然想从我的功用函数中得到较小的脚印。例如，在最小化之后，flatten可以将1.2K贡献到您的包中。所以我建立了一套简化的房客功能。我对flatten的实现与50 bytes有关。您可以在这里查看它是否适合您：https://github.com/simontonsoftware/micro-dash