說點Angular Cli打包的事

1、引言

Angular從開發再到生產環境部署都離不開Angular Cli工具集，而Angular Cli本質上是使用 Webpack（當前使用版本爲3） 來打包資源。

Webpack 自己並不複雜，略用過一點都清楚，只須要建立一個 webpack.config.js 的文件並簡單的配置，就能夠把一個複雜的應用全部文件所有打包成若干靜態資源文件。

然而一個複雜的應用免不了使用到第三方類庫，當這些外部類庫與自身業務腳本聯繫在一塊兒時，就產生一個你們都關心的問題：性能優化。

Angular Cli在構建一個含有路由、表單、HTTP等基本的Angular應用大約在150KB左右，就Angular體量而言，本身寫一個 Webpack 也很難能優化到這個大小。因此說，Angular Cli是頗有良心的做品。然而極大的簡化對 Webpack 的使用，何樂不爲呢？

本文我將介紹Angular Cli的一些配置在生產環境中所產生的效果，但願能讓你們因爲一些不合理的行爲可能會致使文件體量的上升在改善這一問題時有所幫助。

2、.angular-cli.json 配置

Angular Cli 的配置文件是根目錄下的 .angular-cli.json，而會影響文件體量的只有 styles、scripts 兩個節點。

一、scripts

scripts 節點最後會生成一個獨立的 scripts.bundle.js 文件，通常咱們會把一些外部非Angular組件的類庫放置在這裏，好比：jQuery。

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../test.ts"
]

scripts 節點還容許 *.ts 文件。

二、styles

styles 節點最後會生成一個獨立的 styles.bundle.css 文件。除此以外，組件內（styles 或 styleUrls）的樣式會所有打包進 .js 文件中。

正如 jQuery 同樣，若是咱們須要引用第三方UI庫，好比：bootstrap 那麼：

"styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss",
    "styles.scss"
]

默認狀況引用的是 ./src/styles.scss，你能夠繼續導入外部其它外部樣式文件。

@import "variables";
@import "nav";
@import "layout";

組件類樣式

Angular組件內使用 styles 或 styleUrls 的樣式會所有打包進相應模塊的 .js 文件中；而且樣式生成存儲的方式是沒法改變的。

encapsulation

順帶提一下。既然是Angular組件，若是說此時還須要外部的樣式這顯得有點框住組件獨立性的特色，然而組件樣式是否污染其它組件呢？咱們經過指定 encapsulation 樣式封裝方式來改變這一些行爲，它包括三個值：

• ViewEncapsulation.Emulated 默認，採用額外添加一些 _ngcontent 屬性來限定樣式隔離
• ViewEncapsulation.Native 採用Shadow Dom隔離方式
• ViewEncapsulation.None 不隔離

3、ng build 指令

Angular Cli 會根據 .angular-cli.json 配置（apps/root、apps/main）決定從哪裏開始啓動。所以，當執行：

ng build --prod  --build-optimizer

--build-optimizer 從 1.3.0-rc.5 纔開始支持。相比較以前 Cli 版本，Tree-Shaking 力度更大，固然相應的文件大小也更輕。

會從根模塊開始逐一對每個模塊進行打包，並保存在每個文件當中。若採用路由遲延加載模塊的話，會在 inline.js 中加上相應的動態加載腳本代碼。

一、文件名哈希

Angular Cli 提供了 --output-hashing 參數，來指定文件名哈希模式，它包括四種：

模式	說明
none	不哈希
all	全部（若 --prod 時默認）
media	限資源文件
bundles	限webpack打包後的js文件

注意：這裏並不會哈希 assets 文件夾，由於該文件夾採用是直接複製的形式。

二、指定輸出

Angular應用不少時候多是放在現有WEB服務的某個目錄下（例如：v2），所以，訪問地址會變成：https://www.demo.com/v2。但會發現，沒法加載應用；這是由 index.html 會包括一句：

<base href="/">

倒置全部腳本資源的加載URL指向根目錄。Angular Cli 提供一個參數改變該值。

ng build --prod --bh /v2/

每每在開發過程當中總須要依賴一些圖片資源的訪問，假若在代碼中採用絕對路徑，那就懵逼了，因此建議不要在代碼中使用絕對路徑訪問資源文件。

4、優化方式

一、輸出包體組成分析文件

Webpack 有一個很是好用的工具叫 webpack-bundle-analyzer，會自動分析包體組成結構，並以一種可視化的方式顯示。

首先，生成 stats.json 包體組成結構的統計文件。

ng build --prod --stats-json

最後訪問 webpack analyse 導入生成的JSON文件便可。

利用可視化的視覺能夠了解一些優化的細節。

二、Rollup 搖樹優化

所謂Rollup是指Webpack2會把那些應用中未使用的引用代碼除掉，但不會刪除這些代碼，因此就須要配合 UglifyJs 可以智能的移除這些未使用的代碼。從而減小包體大小。

而Agnular應用是基於Typescript，所以Angular Cli提供了一個叫 Angular Build Optimizer 插件，將 Typescript 編譯結果轉化成更友好的UglifyJs版本。這樣UglifyJs就可以更有效的移除那些未使用的代碼。

Angular Cli只須要加上 --build-optimizer 參數就能夠，在一些狀況下壓縮的仍是很厲害的。

ng build --prod --build-optimizer

三、導出Webpack配置

Angular Cli 是基於 Webpack 封閉的一個Angular命令行工具，但並不表示咱們沒法瞭解細節。

Webpack 的核心是 webpack.config.js 文件，而後 Angular Cli 構建的項目並看不到該文件。

可是能夠透過 ng eject （更多細節見wiki） 轉化成 Webapck 項目所須要的配置文件與運行配置指令。這時候會在根目錄產生 webpack.config.js 文件。

不過，同時也會改變了 package.json 與 .angular-cli.json 的一些配置，若你只想查看 Webpack 配置信息，能夠還原這些配置便可。

結論

本文只是平常作一次總結，都是一些網絡中能夠查閱到的知識，並沒有新意。而上面全部 Angular Cli 相關命令，均可以在 Wiki 都有相應的描述。

Happy coding!