AoT 后的 Angular 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)

我们也在使用“PDFMake”。

我主要有两个问题:

1. 将 main.js 的大小增加到 5.8Mb 是否可以接受html 代码将在构建时编译为 400 的原因组件。
2. vendor.js文件由什么组成，有没有第三方包含哪些库或 PDFMake 等文件？

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

Answer 1

首先，vendor 确实包含了你所有的依赖。

我做了一些实验，结果如下:

• ng build 总计:6.5mb，vendor:5.5mb，main*:0.4mb
• ng build --aot --prod 总计:2.2mb，vendor 1.7mb，main*:0.3mb

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

在我的例子中，我的主 ID 缩小了。我觉得我的应用太小了，无法判断你的增加是否可以接受。

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

• ng build --aot --prod --build-optimizer=true --vendor-chunk=true 总计 1.8mb，vendor 1.2mb，main*:0.3mb

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