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% 的图像大小。