為生產環境編譯 Angular 2 應用

原文出處：

時間 2016-11-15 08:51:48

張志敏的技術專欄原文

主題angularjs

ecmascript

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 的指令碼，這個在生產環境下（特別是移動端）是無法接受的。

傳統的方式無非就是進行打包和壓縮，我使用 browserify 和 uglifyjs 來進行打包與壓縮，首先是安裝這兩個工具類庫：

npm i -d browserify uglifyjs

在 package.json 檔案中新增這兩個 npm 命令：

現在執行這兩個命令，看看會怎麼樣：

npm run bundle && npm run minify

經過一大堆 warn 之後，沒有出現 error ，也沒有出現 npm-debug.log 檔案，證明沒有錯誤，現在來分析一下大小：

ls -hldist -rw-r--r-- 1 zhang staff 1.4m nov 14 14:08 bundle .js-rw-r--r-- 1 zhang staff 528k nov 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 nov 14

14:08 bundle.js

-rw-r--r-- 1 zhang staff 528k nov 14

14:10 bundle.min.js

-rw-r--r-- 1 zhang staff 129k nov 14

14:15 bundle.min.js.gz

經過 gzip 之後， bundle.min.js.gz 有 129k ，似乎應該可以了吧？但是我覺得還有優化的空間。

es2016 (es6) 有乙個很重要的特性，那就是 tree shaking ，可以移除專案中不需要的部分，接下來我們使用 rollup 進行 tree shaking 。

為了能夠使用 tree shaking ，我們需要將專案中的 typescript 編譯成 es2015 指令碼，需要修改 typescript 配置，新建乙個tsconfig-es2015.json的配置檔案，內容如下：

,
"files": [
]}

在 angular2 應用中，包含了乙個即時編輯器 (jit) ，在預編譯好的應用中不是必需的，使用 angular2 的 aot 編譯可以移除即時編譯器 (jit) ，因此需要先安裝 angular 的編譯器：

npm i-d @angular/compiler-cli

為了使用 aot 編譯出來的檔案， main.ts 檔案也要做相應的修改，將 main.ts 檔案另存為main-aot.ts，修改內容如下：

import  from
'@angular/core';
import from
'@angular/platform-browser';
enableprodmode();
const platform = platformbrowser();

不再使用platform-browser-dynamic, 改為使用platform-browser。

同時 index.html 也另存為index-aot.html，也做相應的修改，不在載入 system.js ，改為直接使用最終的 aot 指令碼：

head>

為生產環境編譯 Angular 2 應用

angular2基礎環境搭建

Angular2環境搭建

angular2 環境配置

為生產環境編譯 Angular 2 應用

angular2基礎環境搭建

Angular2環境搭建

angular2 環境配置

相關推薦