这篇文章主要介绍了详解为生产环境编译Angular2应用的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考 。一起跟随小编过来看看吧
Angular 2 已经发布了 2.1.2 版本，相信很多人已经在使用(试用)了，相比 AngularJS 1.x，Angular 2 在性能上有了长足的进步，同时 Angular 2 也变得非常的庞大，动辄几兆的脚本，如何部署到生产环境? 接下来就介绍如何为生产环境编译 Angular 2 应用，在本文中，我们将 Angular 2 官方文档中的Hello Angular 应用编译到 50K 以下，以用于生产环境 。
未经优化的应用
根据 Angular2 官方的 QuickStart 快速创建一个Hello Angular 应用，在没有任何优化的情况下，运行情况如下图所示：
从上图可以看出，仅仅一个 Hello 应用，就产生了 40 个请求，加载了 1.8M 的脚本，这个在生产环境下(特别是移动端)是无法接受的 。
要看这一步的完整源代码，请移步 GitHub。
打包与压缩
传统的方式无非就是进行打包和压缩，我使用 browserify 和 uglifyjs 来进行打包与压缩，首先是安装这两个工具类库：
在 package.json 文件中添加这两个 npm 命令：
现在运行这两个命令，看看会怎么样：
经过一大堆 WARN 之后，没有出现 ERROR，也没有出现 npm-debug.log 文件，证明没有错误，现在来分析一下大小：
bundle.js 有 1.4M，不过 bundle.min.js 被压缩到了 528K，看起来还不错，还可以再优化一下，那就是 gzip 压缩，通常在服务器上都会启用：
经过 gzip 之后，bundle.min.js.gz 有 129K，似乎应该可以了吧? 但是我觉得还有优化的空间 。
要看这一步的完整源代码，请移步 GitHub。
AOT 以及 Tree Shaking
ES2016 (ES6) 有一个很重要的特性，那就是 Tree Shaking，可以移除项目中不需要的部分，接下来我们使用 rollup 进行 Tree Shaking。
为了能够使用 Tree Shaking，我们需要将项目中的 TypeScript 编译成 ES2015 脚本，需要修改 TypeScript 配置，新建一个 tsconfig-es2015.json 的配置文件，内容如下：
在 Angular2 应用中，包含了一个即时编辑器 (JIT)，在预编译好的应用中不是必需的，使用 Angular2 的 AOT 编译可以移除即时编译器 (JIT)，因此需要先安装 Angular 的编译器：
为了使用 aot 编译出来的文件，main.ts 文件也要做相应的修改，将 main.ts 文件另存为 main-aot.ts，修改内容如下：
不再使用platform-browser-dynamic , 改为使用platform-browser。
同时 index.html 也另存为index-aot.html，也做相应的修改，不在加载 system.js，改为直接使用最终的 aot 脚本：
接下来的整体的思路是：
【详解为生产环境编译Angular2应用的方法】1、使用 ngc 进行 aot 编译;
推荐阅读
- 李白和杜甫并称为什么
- 696在wm5下的一些注意事项及如何将wm5降为2003se
- 买红米k50pro后悔死了-红米k50pro为什么骂声一片
- 科目三多少分为合格
- we上单为什么叫呼吸哥
- 端午节几月几号农历
- 为什么手机来电话屏幕不亮怎么办
- 天行有常不为尧存出自哪里
- 违法解除劳动合同的行为有哪些
- 华为手机天气删除了怎么恢复