詳解為生產環境編譯Angular2應用的方法
【詳解為生產環境編譯Angular2應用的方法】這篇文章主要介紹了詳解為生產環境編譯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 腳本：
接下來的整體的思路是：
1、使用 ngc 進行 aot 編譯;
這一步將會生成一系列*.ngfactory.ts *.module.metadata.json 臨時文件， 可以更新.gitignore 來忽略這些文件，避免對代碼庫造成污染;
2、將 typescript 文件編譯成 es2015 (es6) 腳本;
3、使用 rollup 進行 tree shaking ， 移除項目不使用的功能;
4、再次使用 typescript 將 tree shaking 之后的腳本編譯成 es5 腳本;
5、使用 uglifyjs 再次壓縮上一部生成的 es5 腳本;
這幾個命令對應的 npm 腳本如下：
最終只要運行一個命令即可：
最后來看一下最終的文件大?。?
最終生成的 bundle-aot.min.js.gz 只有 46K，比沒有使用 aot 編譯的最終文件 bundle.min.js.gz 少了將近 2/3，可以說 aottree shaking 效果非常的顯著 。
要看這一步的完整源代碼，請移步 GitHub。
經過這樣的終極編譯優化編譯之后，應該可以放心的部署到生產環境了 。
