Angular 2：减小应用程序大小（除了捆绑/缩小）答案

【问题标题】：Angular 2: Reduce app size (in addition to bundling/minification)Angular 2：减小应用程序大小（除了捆绑/缩小）
【发布时间】：2016-05-31 10:31:42
【问题描述】：

我有一个中小型（约 28 KB，仅包括（TypeScript 转译的）JS + HTML 模板）Angular 2 应用程序。

它最初基于angular.io quickstart，但现在我正在使用 JSPM 捆绑/缩小它进行部署。

我获得的捆绑 JS 文件为 2.1 MB，使用 gzip 压缩后降至 449 KB。

这仍然相当大，我想问一下如何最好地减少应用程序的整体部署大小，以最小和最有效的包交付我的应用程序。

编辑：我应该提一下，通过单独导入 RxJS 运算符，我已将未压缩但缩小的包大小减少到 1.9 MB，例如与import 'rxjs/add/operator/map';；所以我会在此之上寻找任何尺寸节省。

非常感谢您的帮助。

【问题讨论】：

【解决方案1】：

现在 Angular 2 已经发布了 2.0.0，还有 documentation on Ahead of Time compilation of Angular apps（即从 TypeScript + HTML 模板到 Javascript）。

编译从 Angular 2 中移除（模板）编译器，将 Angular 2 的负载减少了一半。

正如 Gunter Zochbauer 所述，支持使用 rollup 进行树摇动，从而进一步减小包大小。

Angular CLI 中的生产捆绑现在支持 Tree Shaking，AoT 编译支持也在开发中。

使用 ng-cli@1.0.0-beta.17 新项目，无需任何更改：

ng build --prod:

3.9K styles.b52d2076048963e7cbfd.bundle.js
183K main.8b778eea5dd35968ef66.bundle.js.gz
805K main.8b778eea5dd35968ef66.bundle.js

ng build --prod --aot:

3.9K styles.b52d2076048963e7cbfd.bundle.js
99K  main.a2eb733289ef46cb798c.bundle.js.gz
452K main.a2eb733289ef46cb798c.bundle.js

这意味着一个基本的、可运行的应用程序现在小于 100 KB，并带有 AoT 编译、压缩、tree-shaking 和 gzipping。

【讨论】：

如何使用.gz文件代替原来的js文件。我为此提出了一个问题：stackoverflow.com/questions/41047617/…
嗨 AngularM，看起来您的单独问题已经在那里得到解答，但简而言之，您需要配置您的 Web 服务器（通常是 Apache 或 Nginx，看起来您正在通过 CloudFlare ) 与 gzip 一起使用。您无需在 Angular 2 应用程序中进行配置，这一切都取决于 Web 服务器和浏览器来处理。
什么是最简单的 Web 服务器操作和设置。我不知道该怎么做
工作应用程序的总大小不是 425 + 99 + 3.9kb 吗？这在某种程度上仍然很大
不，您只需要提供 gzip 压缩的主包 (99K) 而不是未压缩的包 (452K)，因此主包的大小为 99K，如果样式则小于 3.9K他们也被压缩了。

【解决方案2】：

我使用https://tools.pingdom.com 进行页面/css/脚本大小检查，因为它们是在进程之后从服务器接收到的。

首先在服务器端使用“gzip”，在使用 gzip => 3mb 之前，在 gzip 560kb 之后

其次，使用此命令进行构建， "ng build -e=prod --prod --no-sourcemap --aot"

当使用“ng build”页面大小=> 560kb，使用后 "ng build -e=prod --prod --no-sourcemap --aot" 页面大小 => 227kb

我正在研究 MEAN 堆栈，这些有助于减少页面大小希望对你有帮助

【讨论】：