web-dev-qa-db-ja.com

common.chunk.jsとは何ですか？

私はAngular 5アプリ、angular-cli 1.6.6で実行しています。アプリをバンドルすると、（他のすべての中に）common.chunkができます。 js。

あなたはそれが何であるか知っていますか？それは私のモジュールのどれとも一致しません、それもvendorやmainやではありません）polyfill専用のチャンクがあるため。

enter image description here

angularwebpackangular-cli
8
rocketer

共通チャンクは、複数の機能モジュールが使用するすべてのものの場所です。

カスタムgridモジュールにカスタムグリッドコンポーネントがあるとします。次に、このグリッドモジュールをuserおよびadmin機能モジュールにインポートします。 gridモジュールは複数の機能モジュールで使用されるため、Webpackはそれを他の機能モジュールが依存するcommon.chunkに統合します。

チャンクの名前付けをオフにしてビルドを実行すると（--named-chunks false---prodビルドではデフォルトで使用されます）、common.chunkは0.chunkになります-ロードする必要があるゼロ番目のチャンク他の遅延チャンクの前。

これの欠点の1つは、アプリに小さなレイジーモジュールがたくさんある場合（スクリーンショットから判断するとそうだと思います）、common.chunkが特に急速に肥大化し始めることです。怠惰なモジュールのうち2つが素晴らしい（まだぽっちゃりした）チャートライブラリを使用しているとしましょう。グラフライブラリのツリーが揺れるコードはすべてcommon.chunkになります。他の遅延モジュールは、このようなチャートコードの山を使用していませんが、common.chunkに依存しており、不要なチャートコードをすべてロードして実行します。

何が何であるかを確認するには、webpack-bundle-analyzerを使用して、ビルドされたチャンクの内部を検査できます。 npm i --Dを使用するか、npxを使用して、開発依存関係を膨らませないでください。

ng build --prod --stats-json && npx webpack-bundle-analyzer dist/stats.json

これが少し役立つことを願っています:-)

14
Heehaaw