本文主要給大家介紹了關于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 樣式封裝方式來改變這一些行為，它包括三個值：