web-dev-qa-db-ja.com

Angular CLI出力-バンドルファイルの分析方法

私はAngular CLIを使用して、--prodスイッチ。バンドルはdistディレクトリに作成されます。ツリーシャックやその他のすべてのステップの後に、実際にバンドルに入れられたクラスと関数を知る方法はありますか？

angularangular-clitree-shaking
19
Picci

webpack-bundle-analyzer を使用して、バンドルを検査できます。

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

  • package.jsonで"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"scriptsセクションを変更します

  • npm run analyze

これをチェックアウトできます repo これは、遅延読み込みを実装する方法を示す単純なangularアプリであり、 webpack-bundle-analyzer は既に上記のように設定されています。

また、バンドルサイズを監視するようにAngular CLI budgets を構成できます。

更新：
angular console を使用している場合、 bundle analysis機能があります 組み込み

41
Kuncevič

Angular console 7.4なので、Angularバンドルを分析する新しい方法があります。

  • Nrwlテクノロジーによるvscode拡張機能「Angular Console」をインストールします。
  • オプション：まだ行っていない場合は、ワークスペースをng add @nrwl/schematicsでnrwl-nx-workspaceに変更します（これは単なる拡張angularワークスペースですが、デフォルトのangularワークスペースで動作します。も））。
  • Projectsに移動し、ビルドするアプリを選択して、aotおよびproduction。

以上です。出力は次のとおりです。バンドルのサイズとバンドルのすべての部分が含まれています。分析するファイルを選択できます（main/polyfills/1/etc）。そのファイルごとにそのパイが表示されます。非常に詳細で使いやすい。

enter image description here

5
ngfelixl