Angular 2 App Deploy Size Reduction

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

我的区分文件夹如下图所示。有趣的是，网络选项卡中没有显示vendor.bundle.js。是因为firebase需要vendor.2ff9250938e6ffbe8462.bundle和'解压缩？'它来自vendor.bundle.js（从140mb变为5.4mb。或者我在这里讲童话？）

Answer 1

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

以下是应用gzip后应该如何看待chrome：

Angular 4将很快推出，并将应用总规模缩小约25％。

另外我可能错了，但看起来你的图像太重了，你应该尝试压缩它们。 5％的压缩有时可以节省50％的图像尺寸。