Angular CLI 輸出 - 如何分析包文件

Question

我正在使用 Angular CLI 使用--prod開關構建用於生產的應用程序。 捆綁包在dist目錄中創建。 有沒有辦法知道在 tree-shacking 和所有其他步驟之后實際上已經將哪些類和函數放入包中？

Answer 1

2020 年更新：

angular 團隊強烈建議只使用source-map-explorer來分析你的包大小，而不是webpack-bundle-analyzer 。 根據他們的說法，webpack-bundle-analyzer 和其他一些類似的工具沒有提供與 angular 構建過程有關的實際信息。

更多信息可以在web.dev 上找到- https://youtu.be/B-lipaiZII8?t=215

要全局安裝 source-map-explorer：-

npm i -g source-map-explorer

要么

yarn global add source-map-explorer

分析包大小：-

source-map-explorer dist/my-awesome-project/main.js

請記住准備好源映射：它們可以通過使用ng build --prod --sourceMap=true來獲得

原始答案：
你可以使用webpack-bundle-analyzer來檢查你的包。

• npm install webpack-bundle-analyzer --save-dev

• 使用"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"修改您的package.json scripts部分"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

• npm run analyze

你可以查看這個repo它只是一個簡單的 angular 應用程序，它演示了如何實現延遲加載，並且它已經像上面一樣設置了webpack-bundle-analyzer 。

你也可以配置 Angular CLI預算來監控你的包大小。

更新：
同樣使用@ngx-builders/analyze，您可以執行以下操作：

• ng 添加@ngx-builders/analyze
• npm i source-map-explore -g
• ng run [YOUR_PROJECT_NAME]:analyze

更新：
如果您現在使用nx 控制台（也稱為角度控制台），它現在具有內置的 包分析功能，還請記住，@Klaster_1 在評論中指出的每個項目的stats.json路徑可能不同。

Answer 2

2020angular團隊推薦

angular 團隊強烈建議只使用source-map-explorer來分析你的包大小，而不是webpack-bundle-analyzer 。 根據他們的說法，webpack-bundle-analyzer 和其他一些類似的工具沒有提供與 angular 構建過程有關的實際信息。

更多信息可以在web.dev上找到 - https://youtu.be/B-lipaiZII8?t=215

要全局安裝 source-map-explorer：-

npm i source-map-explorer

要么

yarn global add source-map-explorer

分析包大小：-

source-map-explorer dist/my-awesome-project/main.js

請記住讓您的源映射文件可用（可以通過使用ng build --prod --sourceMap=true來獲得）

旁注：我個人使用 webpack-bundle-analyzer 已經很長時間了。 但是從現在開始 source-map-explorer。

Answer 3

編輯 [2020-06-08]

Angular 控制台已重命名為Nx 控制台。 當您在 VSCode 中轉到控制台時，您可以在啟用statsJson選項的情況下運行構建命令。 根據您的 TypeScript 配置，這會生成一些stats-es*.json文件到編譯目錄旁邊的構建目錄中。 這些您可以與webpack-bundle-analyzer 一起使用（如已接受的答案中所述）

npx webpack-bundle-analyzer ./pathto/stats-es2015.json

根據您的設置調整 EcmaScript 編號。

舊答案

從Angular 控制台7.4 開始，有了一種分析 Angular 包的新方法。

• 安裝 Nrwl 技術的 vscode 擴展“Angular Console”。
• 可選：如果您還沒有，請使用ng add @nrwl/schematics將您的工作區變成 nrwl-nx-workspace（這只是一個擴展的ng add @nrwl/schematics工作區，但它也適用於默認的ng add @nrwl/schematics工作區）。
• 轉到“項目” >“選擇要構建的應用程序”，然后使用aot和production運行構建命令。

就是這樣。 輸出如下。 它包含包大小和包的所有部分。 您可以選擇要分析的文件（main/polyfills/1/etc）。 它將顯示每個文件的餅圖。 非常詳細且易於使用。

Answer 4

按照以下步驟將 webpack 代碼分析器添加到您的 angular 應用程序

    - cd into your angular app
    - npm install --save-dev webpack-bundle-analyzer
    - Add below lines to script block of package.json
      "build:stats": "ng build --stats-json",
      "analyze": "webpack-bundle-analyzer dist/stats.json" ,
      "build-analyze": "npm run build:stats && npm run analyze",
    - Run `npm run build-analyze`