构建 Angular2 应用程序

Question

我正在进入 Angular2。我创建了一个非常简单的测试项目来开始测试我正在学习的内容。

基本上这是我的项目：https://github.com/developer82/ReactJS.vs.Angular2/tree/master/angular2

我是从从 Internet 下载的示例项目开始的。但是一旦我运行npm install，它会下载一堆 NPM 包，现在该目录的大小约为 100mb，用于一个非常非常小的应用程序。

显然，这不是最终上传到生产环境的项目。我知道很多软件包是不需要的，有些是用于运行将运行应用程序的服务器。

在今年的 ng-conf 中，他们非常自豪地宣布 Angular2 为 45kb - 比 Angular1 小。所以我的问题是——假设我已经构建了我的 Angular2 应用程序——现在呢？如何将所有内容编译到最小尺寸并且只编译所需的包？这一切如何组合成一个 45kb 的文件？或者换句话说 - 我已经构建了我的应用程序 - 下一步要发布它？

编辑

我按照angular-cli 工具 (https://github.com/angular/angular-cli#installation) 的说明进行操作。

创建一个新项目会创建一个大小为 150+ mb 的目录。但是在运行ng build -prod 之后，它会生成一个大小为 1mb 的目录 - 小得多且轻松，但我看到 angular 不是 main.js 大小为 675kb - 与他们在 ng 中谈到的 45kb 相差甚远 - conf。而且这还没有考虑到所有其他需要加载的 js 库（系统、es6-shim、反射、区域）。

这对于 Web 应用程序来说非常重要（尤其是针对移动设备时）。我们怎样才能使它（很多）更小？

Answer 1

另一种方法是利用 Gulp 编译和打包您的应用程序。为此，您可以使用以下插件：

• gulp-typescript - 将 TypeScript 内容编译成 JavaScript
• gulp-uglify - 缩小 JavaScript 内容
• gulp-concat - 连接文件
• gulp-html-replace - 引用新的

查看这个问题了解更多详情：

• How do I actually deploy an Angular 2 + Typescript + systemjs app?

以及对应的项目：

• https://github.com/templth/angular2-packaging

Answer 2

捆绑包仍然可以压缩，我使用 SystemJS Builder，从 576KB（未压缩）到 122KB（压缩）。使用模板编译器可能会更小，Angular 团队仍在努力。