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

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù)，十年企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都數(shù)千家客戶提供網(wǎng)頁(yè)設(shè)計(jì)制作,網(wǎng)站開(kāi)發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營(yíng)銷型網(wǎng)站建設(shè)，品牌網(wǎng)站制作，同時(shí)也為不同行業(yè)的客戶提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)建站。

一、引言

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

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

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

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

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

二、.angular-cli.json 配置

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

1、scripts

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

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

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

2、styles

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

正如 jQuery 一樣，如果我們需要引用第三方UI庫(kù)，比如：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 的樣式會(huì)全部打包進(jìn)相應(yīng)模塊的 .js 文件中；并且樣式生成存儲(chǔ)的方式是無(wú)法改變的。

encapsulation

順帶提一下。既然是Angular組件，如果說(shuō)此時(shí)還需要外部的樣式這顯得有點(diǎn)框住組件獨(dú)立性的特點(diǎn)，然而組件樣式是否污染其它組件呢？我們通過(guò)指定 encapsulation 樣式封裝方式來(lái)改變這一些行為，它包括三個(gè)值：

• ViewEncapsulation.Emulated 默認(rèn)，采用額外添加一些 _ngcontent 屬性來(lái)限定樣式隔離

• ViewEncapsulation.Native 采用Shadow Dom隔離方式

• ViewEncapsulation.None 不隔離

三、ng build 指令

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

ng build --prod --build-optimizer

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

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

1、文件名哈希

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

注意：這里并不會(huì)哈希 assets 文件夾，因?yàn)樵撐募A采用是直接復(fù)制的形式。

2、指定輸出

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

倒置所有腳本資源的加載URL指向根目錄。Angular Cli 提供一個(gè)參數(shù)改變?cè)撝怠?/p>

ng build --prod --bh /v2/

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

四、優(yōu)化方式

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

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

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

ng build --prod --stats-json

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

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

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

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

而Agnular應(yīng)用是基于Typescript，因此Angular Cli提供了一個(gè)叫 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 封閉的一個(gè)Angular命令行工具，但并不表示我們無(wú)法了解細(xì)節(jié)。

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular Cli打包的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!