Angular 2：减小应用程序大小（除了 bundling/minification）

Question

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

它最初是基于 angular.io quickstart，但现在我 bundling/minifying 它使用 JSPM 进行部署。

我得到的捆绑 JS 文件是 2.1 MB，在使用 gzip 压缩后下降到 449 KB。

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

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

非常感谢您的帮助。

Answer 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 的 tree-shaking，进一步降低了包的大小。

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 编译、缩小、摇树优化和 gzip 压缩。

Answer 2

我使用 https://tools.pingdom.com 进行 page/css/scripts 大小检查，因为它们是在处理后从服务器收到的。

首先在服务器端使用 "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 堆栈，这些对减小页面大小有很大帮助希望对你有帮助

Angular 2: Reduce app size (in addition to bundling/minification)