ng build -prod vs 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但是仍然没有得到这些命令创建的构建之间的明显区别.

为什么有这两种不同的方式,性能或其他方式有何不同？

Answer 1

--build-optimizer and --vendor-chunk

从Angular CLI文档：

使用Build Optimizer时，默认情况下将禁用供应商块。您可以使用--vendor-chunk = true覆盖此设置。

如果没有单独的供应商块，则Build Optimizer的总包大小会更小，因为将供应商代码与应用程序代码放在同一块中可以使Uglify删除更多未使用的代码。

Answer 2

首先为什么vendor chunk有用？

vendor.js因为你要更新是发展过程中最有用的频繁得多的代码比你下载一个新的框架或更新NPM包。

因此，在启用供应商块的开发过程中，编译时间更快。

至于为什么是--vendor-chunk一个选项？这是我的头顶，但：

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