AoT后的角度4束大小

Question

我们创建的应用程序大致有400个组件和70-80服务。我们得到了AOT构建，其中main.js的大小为5.8 Mb，vendor.js的大小为1.2Mb。我不知道这种比较是否正确。我们的App文件夹的整个大小只有4.24Mb。由于我们的App文件夹仅为4.24Mb，因此AoT文件大小应小于它。从这个链接https://github.com/angular/angular-cli/issues/4896我开始知道html是在构建时编译的，所以html大小会增加。以下是我们正在使用的第三方库：

1. Ag-Grid（https://github.com/ag-grid/ag-grid-angular）

2. Angular2-JWT（https://github.com/auth0/angular2-jwt）

3. MyDatePicker（https://github.com/kekeh/mydatepicker）

我们正在使用＆＃34; PDFMake＆＃34;还

我主要有两个问题：

1. main.js的大小增加是否可以接受5.8Mb 因为html代码将在构建时编译为400 组件。
2. vendor.js文件包含什么。它拥有第三方 包含的库或像PDFMake这样的文件？

我真的想知道如何在没有延迟加载和gzip压缩的情况下减少main.js的文件大小？

Answer 1

首先，供应商确实包含了所有依赖项。

我做了一些实验，这些是我的结果：

• ng build总计：6.5mb，供应商：5.5mb，主*：0.4mb
• ng build --aot --prod总计：2.2mb，供应商1.7mb，主*：0.3mb

*我正在使用延迟加载，因此这将是我的主要包和其他包的大小。

在我的情况下，我的主要内容缩小了。我认为我的申请太小，无法判断你的增加是否可以接受。

我不知道为什么你不想使用延迟加载，但还有另一种选择。有一个名为--build-optimizer的实验选项。这些是我的结果：

• ng build --aot --prod --build-optimizer=true --vendor-chunk=true总计1.8mb，供应商1.2mb，主*：0.3mb

这减少了我的供应商0.5mb。我看到我的主要没有显着的影响因为它很小。该选项还合并了main和vendor，因此您必须添加--vendor-chunk=true来生成供应商。