使用 Angular CLI 和 Webpack 分析包尺寸
對於 Web app 來說，高性能總是最高優先級，對於 Angular 也不例外。但是隨着應用復雜度的不斷增長，我們如何才能知道哪些內容打包到了應用中呢？如何跟蹤包的尺寸？我們不希望一次發送太多的 JavaScript ，以至於拖慢應用的速度。
過大尺寸的 JavaScript 包是喪失用戶歡心的良葯。不僅是拖慢了下載效率，而且要花費更多的時間在瀏覽器中分析然后執行。為了保持應用的速度，我們需要確保包尺寸足夠小（250k 或更小），並在適當的時間加載。
在這篇文章中，我們將使用 Angular CLI 和一些簡單的命令來獲得我們發布產品的 Angular 應用包的詳細報告。
Angular CLI
1. 首先，我們需要有一個應用作為分析對象。使用 Angular CLI 的 new 命令可以很簡單地創建一個 Angular 應用。
ng new [應用名稱]
應用將被創建在應用名稱的文件夾中。
2. 然后，我們可以產品模式編譯應用，我們使用 CLI 的命令進行編譯。
這里涉及到兩個主要參數 prod 和 stats-json
2.1 prod
產品模式編譯使用參數 prod，下面是 dev 和 prod 的區別
使用 --dev/--target=development 和 --prod/--target=production 兩者都影響元標志，如果沒有指定，默認為 --dev .
| Flag | --dev |
--prod |
|---|---|---|
--aot |
false |
true |
--environment |
dev |
prod |
--output-hashing |
media |
all |
--sourcemaps |
true |
false |
--extract-css |
false |
true |
--named-chunks |
true |
false |
--build-optimizer |
false |
true with AOT and Angular 5 |
--prod 還設置了下列的設置:
- 如果在
.angular-cli.json 中進行了配置，添加 service worker. - 在模塊中，使用 production 替換
process.env.NODE_ENV的值。 - 對代碼執行 UglifyJS .
2.2 --stats-json
該參數用於生成可以使用 webpack-bundle-analyzer 或者 https://webpack.github.io/analyse 分析包結構的 stats.json 文件。
2.3 實際執行的命令
ng build --prod --stats-json
Webpack bundle analyzer
States.json 是 Webpack 的一個特殊文件，webpack 是 Angular CLI 內部所使用的打包工具。使用 Webpack 幫我們生成的這個文件，我們可以使用各種不同的工具來理解我們的應用。
我們這里使用的工具是 Webpack bundle analyzer 。webpack 包分析器是一個 npm 包，可以在 webpack 的配置中或者命令行使用。對於我們來說，我們使用命令行工具。
為了使用這個工具，我們需要如下步驟：
- 通過 npm 安裝這個工具
npm install --save-dev webpack-bundle-analyzer - 為方便使用，安裝之后，在 package.json 中的 scripts 部分，添加下面的行來創建自定義的 npm 命令
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
- 執行命令
npm run bundle-report
如果命令成功執行的話，你會看到打開了一個瀏覽器窗口，並看到類似如下的頁面。
途中的每種顏色代表一個獨立的包。在這個圖中，可以看到我們有三個包，vendor 中包含所有的庫代碼，polyfill 包和 main 應用代碼包。我們可以近一半查看未壓縮和壓縮之后的尺寸。這使得我們快速檢查最大的包，並幫助我們決定何時使用 Lazy Loading 進一步拆分應用。
對於這個示例來說，可以看到應用的主要部分是 framework 部分，因為應用太簡單了，在 main 中只有很少的組件。使用這個工具，我們可以看到雖然 Http 模塊沒有被使用，但是也被打包到應用中了。在移除這個未用到的模塊之后，應用比以前變得更小更快了。
隨着應用的成長，我們可以通過運行 npm run bundle-report 來仔細分析和檢查依賴關系，以保持應用的尺寸和速度。