快捷導(dǎo)航

簡(jiǎn)單談?wù)勱P(guān)于Angular Cli打包的事

更新時(shí)間：2017年09月05日 09:19:38 作者：cipchk

使用過(guò)angular2人都應(yīng)該知道，angular2提供的Angular CLI來(lái)快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。

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

一、引言

Angular從開發(fā)再到生產(chǎn)環(huán)境部署都離不開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）決定從哪里開始啟動(dòng)。因此，當(dāng)執(zhí)行：

ng build --prod --build-optimizer

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

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

1、文件名哈希

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

模式	說(shuō)明
none	不哈希
all	所有（若 --prod 時(shí)默認(rèn)）
media	限資源文件
bundles	限webpack打包后的js文件

注意：這里并不會(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ì)包括一句：

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

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

ng build --prod --bh /v2/

往往在開發(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 搖樹優(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ù)就可以，在一些情況下壓縮的還是很厲害的。