web-dev-qa-db-ja.com

これらのangle-cliが行うこと:inline.bundle.js、vendor.bundle.js、main.bundle.js?

angular 2プロジェクトのangular-cliで作成された2つのプロジェクトのindex.htmlファイルを確認すると、distフォルダから3ファイルのみを含むページを見ることができます:

inline.bundle.js
vendor.bundle.js
main.bundle.js

しかし今、私は各ファイルが何をするかを理解しようとしています。 angle-cliでコンポーネントを作成し、ダウングレードしたため、angular 1.で記述された別のアプリで使用できます。これら3つのファイルをindex.htmlに追加し、さらにアプリを追加した場合.module.tsファイルは、アプリをアップグレードし、すべてが機能しているようです。Googleangular toturialがangular-cliとその方法について話していないため、理由を解明しようとしています移行を支援します。

23
AngularOne

どれどれ:

inline.bundle.js

これはwebpackローダーです。他のファイルをロードするときに必要なWebpackユーティリティを含む小さなファイル。

最終的に、これはindex.htmlファイル自体の内部に書き込まれ、個別のファイルとしてはまったく生成されません。

vendor.bundle.js

これは、devモードではデフォルトで生成され、prodモードではデフォルトで無視されます(ng build -prodまたはng serve -prod)。

これにはAngularライブラリがほとんどまたはまったく変更されていません。これはビルドプロセスを高速化するためです。また、変更しない場合は別のファイルに保存することをお勧めします多くの場合、より長くキャッシュできます。

典型的なAngularアプローチは、それらをメインバンドルにマージすることです。そうするときは、Webpackツリーシェーキングを実行し、他のモジュールからインポートされなかったEcmaScript/TypeScriptモジュールを削除しますたとえば、Ahead of Timeコンパイラ(AoT)を実行している場合、Angularコンパイラはツリーシェイクされます。

引数--vendor-chunkを設定することにより、別個のベンダーバンドルの生成を明示的に制御することも、制御しないこともできます。

main.bundle.js

前のポイントで説明したように、独自のコード、およびインポートしたその他のものなど。

43
Meligy