详细说明为生产环境编译Angular2应用程序的方法

Angular 2已经发布了2.1.2版本。相信很多人已经用过了(试用)。与AngularJS 1.x相比，Angular 2在性能上有了很大的进步。同时，Angular 2变得非常大，有几兆的脚本。如何将其部署到生产环境中？接下来，我们将介绍如何为生产环境编译Angular 2应用程序。本文针对生产环境，在50K以下的Angular 2官方文档中编写了Hello Angular应用程序。

非优化应用

根据Angular2的官方快速入门，快速创建一个Hello Angular应用程序。没有任何优化，运行情况如下图所示：

从上图可以看出，只有一个Hello应用生成40个请求，加载180万个脚本，这在生产环境下(尤其是移动终端)是无法接受的。

要查看这一步的完整源代码，请访问GitHub。

包装和压缩

传统的方式无非是包装和压缩。我使用browserify和uglifyjs进行打包和压缩。首先，安装这两个工具类库：

通过npm i -D浏览器在package.json文件中添加这两个npm命令：

{ ' scripts ' : { ' bundle ' : ' browserify-s main app/main . js dist/bundle . js '，Mini fy ' : ' uglifyjs dist/bundle . js-screw-ie8-compress-mangel-outputdist/bundle . min . js ' } }现在运行这两个命令，看看会发生什么：

在多次警告后，npm run bundle npm run minify没有出现ERROR，npm-debug.log文件也没有出现，证明没有错误。现在分析一下大小：

ls-hldist-rw-r-r-1 zhustaff 1.4M 11月14日14:08 bundle . js-rw-r-r-1 zhustaff 528 knov 14 14:10 bundle.min.js bundle . js有1.4M，但是bundle . min . js压缩到528K，看起来还不错。它可以再次优化，即gzip压缩，通常在服务器上启用：

gzip dist/bundle . min . js-c dist/bundle.min.js.gz ls-HL dist-rw-R-R-1 Zhang staff 1.4M 11月14日14:08 bundle . js-rw-R-R-1 Zhang staff 528k 11月14日14:10 bundle . min . js-rw-R-R-1 Zhang staff 129K 11月14日143:15在经过gzip之后，有129k，看起来是但我觉得还是有优化的空间。

要查看这一步的完整源代码，请访问GitHub。

AOT与树的摇动

ES2016 (ES6)有一个很重要的功能，就是抖树，可以去掉项目中不必要的部分。然后我们使用汇总来执行树摇动。

要使用Tree Shaking，我们需要将项目中的TypeScript编译成ES2015脚本，修改TypeScript配置，新建一个tsconfig-es2015.json的配置文件，如下所示：

{“compilerooptions”: {“target”:“es2015”，“module”:“es 2015”，“moduleResolution”:“node”，“declaration”: false，“removeComments”: true，“noLib”: false，“emitemodiormetadata”: true，“experiatealdecorators”:[“es6”，“es 2015”，“dom/node _ modules/@ type '，/node _ modules']、' type ' :[]}、' files ' :[' app/main-AOT . ts ']}在Angular2应用程序中包含一个即时编辑器(JIT)，这在预编译应用程序中是不必要的。JIT编译器可以被Angular2的AOT编译移除。

Npm i -D @angular/compiler-cli为了使用aot编译的文件，应该相应地修改main.ts文件。将主文件另存为主文件，修改内容如下：

从“@棱角分明/核心”导入{ enableProdMode }；从" @angular/platform-browser "导入{平台浏览器}；从""导入{ AppModuleNgFactory } ./app。模块。“NGF factory”；enableProdMode()；const platform=platformBrowser()；站台。bootstrapmmodulefactory(appmoduleengfactory)；不再使用平台-浏览器-动态，改为使用平台浏览器。

同时index.html也另存为index-aot.html，也做相应的修改，不在加载system.js，改为直接使用最终的前嗅结节脚本：

！-script src=' http : node _ modules/system js/dist/system。src。js '/script-！- 2.配置SystemJS -！-脚本src=' http : systemjs。配置。js '/脚本脚本系统。导入(“应用程序”).catch(函数(err)){ console。错误(err)；});/剧本/头像！- 3.显示应用程序-body my-应用加载./my-app脚本src=' http : list/bundle-AOT。量滴js '/脚本/正文接下来的整体的思路是：

1、使用攻略进行前嗅结节编译；

新公共管理运行NGC-p-tsconfig-es 2015。数据这一步将会生成一系列* .神经工厂。ts *。模块。元数据。数据临时文件，可以更新。被增加来忽略这些文件，避免对代码库造成污染；

2、将以打字打的文件文件编译成es2015 (es6)脚本；

新公共管理运行TSC-p-tsconfig-es 2015。js 3、使用卷曲进行树在摇动，移除项目不使用的功能；

卷起-f life-c卷起。配置。js-o dist/bundle-AOT-es 2015。js4、再次使用以打字打的文件将树木摇动之后的脚本编译成es5脚本；

TSC-目标es5-allow js dist/bundle-AOT-es 2015。js-out区/捆绑区-AOT。js5、使用uglifyjs再次压缩上一部生成的es5脚本；

AOT区/束区uglifyjs。js-螺杆-ie8-压缩-管理器-输出区/束-AOT。量滴射流研究…这几个命令对应的新公共管理脚本如下：

{ '脚本' : { 'ngc': 'ngc '，' roll ' : ' roll-f life-c roll。配置。js-o dist/bundle-AOT-es 2015。js '，' es5 ' : ' TSC-target es5-allowJs dist/bundle-AOT-es 2015。js-out区/捆绑区-AOT。js '，' minify-AOT ' : ' uglifyjs/dist最终只要运行一个命令即可：

新公共管理运行产品前嗅结节最后来看一下最终的文件大小：

ls -hl-rw-r - r - 1 zhang五线谱595k 11月14日15:59捆绑包-AOT-es 2015。张五线谱669k 11月14日16:01捆绑包-AOT。张五线谱194K 11月14日16:01捆绑包-AOT。量滴js-rw-r-r-1张五线谱46K最终生成的bundle-aot.min.js.gz只有46K，比没有使用前嗅结节编译的最终文件bundle.min.js.gz少了将近2/3 , 可以说前嗅结节树摇动效果非常的显著。

要看这一步的完整源代码，请移步GitHub。

经过这样的终极编译优化编译之后，应该可以放心的部署到生产环境了。

参考资料：

有角的快速启动前嗅结节编译为生产构建角度2应用程序

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。