ng build -prod 与 ng build --prod --build-optimizer=true 的区别

Question

我的Angular项目是@Angular4.3.3

"ng build -prod" 花费77秒进行构建。

"ng build --prod --build-optimizer=true" 花费190秒进行构建，没有供应商块，在大小上较小（尽管大小差异不大）。

控制台图像上的块差异： 我阅读了Bundling & Tree-Shaking但仍然不清楚这些命令创建的构建之间的明显区别。

为什么会有这两种不同的方式以及在性能或其他方面的区别是什么？

- Lahar Shah

Answer 1

--build-optimizer and --vendor-chunk

来自Angular CLI文档：

使用构建优化器时，默认情况下会禁用供应商块。您可以使用--vendor-chunk=true覆盖此设置。

如果没有单独的供应商块，使用构建优化器的总束大小更小，因为将供应商代码与应用程序代码放在同一块中使得Uglify能够删除更多未使用的代码。

- superandrew

Answer 2

首先，为什么在开发中使用vendor chunk很有用呢？

vendor.js在开发过程中非常有用，因为更新你的代码的频率远高于下载新框架或更新npm包的频率。

因此，在启用供应商块时，编译时间在开发期间更快。

至于为什么--vendor-chunk甚至是一个选项呢？这是我随意想到的原因:

• 如果您的应用程序在慢速连接上有很多用户，并且您经常对其进行更新，则具有较大的供应商块可能更有优势，因为它可以更长时间保持不变。当更新应用程序时，块将更小。这不会给您完全优化（摇树）的应用程序，但在非常特定的情况下可能很有用。[这假定您正在使用指纹识别，其中文件名实际上是文件内容的校验和/哈希 - 因此如果文件不改变，则可以缓存该文件。]
• 非常偶尔，您的代码中可能存在微妙的错误，只有在以某种方式最小化代码时才会变得明显。这可能是由于依赖于被'优化掉'的方法/类名。因此，如果您有这样的错误（在修复错误时），则可能需要在生产中启用供应商块。
• 故意启用供应商块使您的应用程序加载变慢 - 然后告诉您的老板您要加班优化它 - 并将其禁用;-)
• 为什么不呢？人们喜欢玩！

- Simon_Weaver

---

在我的情况下，无论我是否使用“vendor-chunk”，总包大小（即主要、供应商、polyfills加上我的自己的模块）几乎相同。然而，我几乎每天都更新我的应用程序，而且我的网站有很多重复访问者。我使用“vendor-chunk”有道理吗？这样，在应用程序更新后，供应商文件仍将保持不变，他们就不必再次下载它。他们只会重新下载现在更小的“main”文件。我错过了什么吗？ - Salvatore Iovene