使用 Angular CLI 和 Webpack 分析包尺寸

時間 2019-12-06

標籤使用 angular cli webpack 分析尺寸欄目 AngularJS 简体版

原文原文鏈接

對於 Web app 來講，高性能老是最高優先級，對於 Angular 也不例外。可是隨着應用複雜度的不斷增加，咱們如何才能知道哪些內容打包到了應用中呢？如何跟蹤包的尺寸？咱們不但願一次發送太多的 JavaScript ，以致於拖慢應用的速度。css

過大尺寸的 JavaScript 包是喪失用戶歡心的良藥。不只是拖慢了下載效率，並且要花費更多的時間在瀏覽器中分析而後執行。爲了保持應用的速度，咱們須要確保包尺寸足夠小（250k 或更小），並在適當的時間加載。html

在這篇文章中，咱們將使用 Angular CLI 和一些簡單的命令來得到咱們發佈產品的 Angular 應用包的詳細報告。webpack

Angular CLI

1. 首先，咱們須要有一個應用做爲分析對象。使用 Angular CLI 的 new 命令能夠很簡單地建立一個 Angular 應用。git

ng new [應用名稱] github

應用將被建立在應用名稱的文件夾中。web

2. 而後，咱們能夠產品模式編譯應用，咱們使用 CLI 的命令進行編譯。json

這裏涉及到兩個主要參數 prod 和 stats-json瀏覽器

產品模式編譯使用參數 prod，下面是 dev 和 prod 的區別app

使用 --dev/--target=development 和 --prod/--target=production 二者都影響元標誌，若是沒有指定，默認爲 --dev .

--prod 還設置了下列的設置:

該參數用於生成可使用 webpack-bundle-analyzer 或者 https://webpack.github.io/analyse 分析包結構的 stats.json 文件。

ng build --prod --stats-json

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 來仔細分析和檢查依賴關係，以保持應用的尺寸和速度。