本文主要給大家介紹了關(guān)于Angular Cli打包的事，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細的介紹吧。

一、引言

Angular從開發(fā)再到生產(chǎn)環(huán)境部署都離不開Angular Cli工具集，而Angular Cli本質(zhì)上是使用 Webpack（當(dāng)前使用版本為2） 來打包資源。

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

然而一個復(fù)雜的應(yīng)用免不了使用到第三方類庫，當(dāng)這些外部類庫與自身業(yè)務(wù)腳本聯(lián)系在一起時，就產(chǎn)生一個大家都關(guān)心的問題：性能優(yōu)化。

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

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

二、.angular-cli.json 配置

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

1、scripts

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

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

scripts 節(jié)點還允許 *.ts 文件。

2、styles

styles 節(jié)點最后會生成一個獨立的 styles.bundle.css 文件。除此之外，組件內(nèi)（styles 或 styleUrls）的樣式會全部打包進 .js 文件中。

正如 jQuery 一樣，如果我們需要引用第三方UI庫，比如：bootstrap 那么：

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

默認(rèn)情況引用的是 ./src/styles.scss，你可以繼續(xù)導(dǎo)入外部其它外部樣式文件。

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

組件類樣式

Angular組件內(nèi)使用 styles 或 styleUrls 的樣式會全部打包進相應(yīng)模塊的 .js 文件中；并且樣式生成存儲的方式是無法改變的。

encapsulation

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

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

三、ng build 指令

Angular Cli 會根據(jù) .angular-cli.json 配置（apps/root、apps/main）決定從哪里開始啟動。因此，當(dāng)執(zhí)行：

ng build --prod --build-optimizer

--build-optimizer 從 1.3.0-rc.5 才開始支持。相比較之前 Cli 版本，Tree-Shaking 力度更大，當(dāng)然相應(yīng)的文件大小也更輕。

會從根模塊開始逐一對每一個模塊進行打包，并保存在每一個文件當(dāng)中。若采用路由遲延加載模塊的話，會在 inline.js 中加上相應(yīng)的動態(tài)加載腳本代碼。

1、文件名哈希

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

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

2、指定輸出

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

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

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

ng build --prod --bh /v2/

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

四、優(yōu)化方式

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

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

首先，生成 stats.json 包體組成結(jié)構(gòu)的統(tǒng)計文件。

ng build --prod --stats-json

最后訪問 webpack analyse 導(dǎo)入生成的JSON文件即可。

利用可視化的視覺可以了解一些優(yōu)化的細節(jié)。

2、Rollup 搖樹優(yōu)化

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

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

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

ng build --prod --build-optimizer

3、導(dǎo)出Webpack配置

Angular Cli 是基于 Webpack 封閉的一個Angular命令行工具，但并不表示我們無法了解細節(jié)。

Webpack 的核心是 webpack.config.js 文件，然后 Angular Cli 構(gòu)建的項目并看不到該文件。

但是可以透過 ng eject （更多細節(jié)見wiki） 轉(zhuǎn)化成 Webapck 項目所需要的配置文件與運行配置指令。這時候會在根目錄產(chǎn)生 webpack.config.js 文件。

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

結(jié)論

本文只是日常做一次總結(jié)，都是一些網(wǎng)絡(luò)中可以查閱到的知識，并無新意。而上面所有 Angular Cli 相關(guān)命令，都可以在 Wiki 都有相應(yīng)的描述。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論