Angular 2 应用程序部署大小缩减

Question

下面是我使用 Angular 2 和 Angular CLI 构建的网络应用程序网络选项卡的快照。我已经事先清理了缓存。如您所见，我最大的文件是 5.4mb，即 vendor.bundle.js 文件。这是正常的还是这个文件很大？!。

我正在使用利用 AOT 和 TreeShaking 的最新 Angular CLI。我还实现了延迟加载，以便只加载相关组件。

我按照 firebase 的指南在终端中使用 firebase deploy 命令将 ng build --prod 生成的 dist 文件夹部署到他们的托管服务。

如何进一步减小大小或调查我的应用程序的哪个“部分”正在加载导致此大小？

我还发现，当我使用手机加载时，它使用 2.2mb 而不是桌面上显示的最大大小 7.5mb。这正常吗？

这是我运行 ng--version 得到的结果

    node: 6.9.1
os: darwin x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.9

我的 Dist 文件夹如下图所示。同样有趣的是，网络选项卡中没有显示 vendor.bundle.js。是因为 firebase 使用 vendor.2ff9250938e6ffbe8462.bundle 和“解压缩”吗？它到 vendor.bundle.js(从 1.4mb 到 5.4mb。还是我在这里说童话？)

Answer 1

我认为您没有使用 --prod，如果您使用了，它会在您的捆绑文件后显示一个随机哈希值(除非我遗漏了什么，有没有办法禁用它？)。

这是应用 gzip 后在 chrome 中的外观:

Angular 4 即将面世，应用总大小将减少约 25%。

---

我也可能是错的，但看起来你的图片太重了，你应该试着压缩一下。 5% 的压缩有时可以节省 50% 以上的图像大小。