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

Question

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

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

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

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

编辑:我应该提一下，我通过单独导入 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 所提到的，tree-shaking with 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。