ng build -prod vs ng build --prod --build-optimizer=true [英] ng build -prod vs ng build --prod --build-optimizer=true

问题描述

我的 Angular 项目是@Angular4.3.3

My Angular project is @Angular4.3.3

ng build -prod

ng build -prod

构建需要 77 秒

ng build --prod --build-optimizer=true

ng build --prod --build-optimizer=true

构建需要 190 秒，没有供应商块，尺寸更小(但尺寸差异不大)

Takes 190 seconds to make a build, No vendor chunk, less in size(but not a big difference in size though)

控制台图像上的块差异:

Chunk differences on console image:

我阅读了捆绑&Tree-Shaking 但仍然没有得到这些命令创建的构建之间的明显区别.

I read Bundling & Tree-Shaking but still don't get the clear difference between builds created by those commands.

为什么会有这两种不同的方式，性能或其他方式有何不同?

推荐答案

--build-optimizer and --vendor-chunk

来自 Angular CLI 文档:

当使用构建优化器时，供应商块将被禁用默认.您可以使用 --vendor-chunk=true 覆盖它.

When using Build Optimizer the vendor chunk will be disabled by default. You can override this with --vendor-chunk=true.

如果没有单独的供应商块，使用构建优化器的总包大小会更小，因为供应商代码在同一块中因为应用代码使 Uglify 可以删除更多未使用的代码.

Total bundle sizes with Build Optimizer are smaller if there is no separate vendor chunk because having vendor code in the same chunk as app code makes it possible for Uglify to remove more unused code.

这篇关于ng build -prod vs ng build --prod --build-optimizer=true的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！