Angular Cli打包的示例分析

這篇文章主要介紹了Angular Cli打包的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、引言

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

Webpack 本身并不復雜，略用過一點都清楚，只需要創建一個 webpack.config.js 的文件并簡單的配置，就可以把一個復雜的應用所有文件全部打包成若干靜態資源文件。

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

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

本文我將介紹Angular Cli的一些配置在生產環境中所產生的效果，希望能讓大家由于一些不合理的行為可能會導致文件體量的上升在改善這一問題時有所幫助。

二、.angular-cli.json 配置

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

1、scripts

scripts 節點最后會生成一個獨立的 scripts.bundle.js 文件，一般我們會把一些外部非Angular組件的類庫放置在這里，比如：jQuery。

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

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

2、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 不隔離

三、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 中加上相應的動態加載腳本代碼。

1、文件名哈希

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

注意：這里并不會哈希 assets 文件夾，因為該文件夾采用是直接復制的形式。

2、指定輸出

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

<base href="/" rel="external nofollow" >

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

ng build --prod --bh /v2/

往往在開發過程中總需要依賴一些圖片資源的訪問，倘若在代碼中采用絕對路徑，那就懵逼了，所以建議不要在代碼中使用絕對路徑訪問資源文件。

四、優化方式

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

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

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

ng build --prod --stats-json

最后訪問 webpack analyse 導入生成的JSON文件即可。

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

2、Rollup 搖樹優化

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

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

Angular Cli只需要加上 --build-optimizer 參數就可以，在一些情況下壓縮的還是很厲害的。

ng build --prod --build-optimizer

3、導出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打包的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!