web-dev-qa-db-ja.com

webpack共通チャンクプラグインとwebpack dllプラグイン

Webpack共通チャンクプラグインを使用して、angular、react、lodashなどのサードパーティライブラリを含むベンダーバンドルを作成する前は、webpack dllプラグインについては知っていました。それらは同じことをしているように見えますが、dllプラグインはビルド時間を短縮することもできます。だから私はこれらのプラグインを一緒に使用する必要があるのか​​混乱しています。本番ビルドでベンダーバンドルを作成するために共通のチャンクプラグインを使用し、開発ビルドでdllプラグインを使用する必要があります。または、実動ビルドと開発ビルドの両方でdllプラグインを使用する必要がありますか?これを説明してもらえますか?

28
pavel06081991

長い回答で申し訳ありませんが、物事を明確にするのに役立つことを期待しましょう。

CommonsChunkPluginの根拠

プロジェクト作成者は、それぞれがバンドルを生成するアプリケーションエントリポイントの数を定義します。典型的な例は、vendorpolyfillsmain。ただし、たとえば、アプリを複数の独立した「エリア」に分割して、個別にロードするのが理にかなっている場合があります(ログイン、メイン、設定など)。

次に、プロジェクトの作成者は、これらのバンドルのいずれか、または別のバンドルに、すべてのバンドルに共通のコードを含める必要があるかを定義します。これは通常、すべてのエントリポイントにわたるサードパーティライブラリと独自の共有ユーティリティです。

そのような共通コードを分析して収集し、定義済みのバンドルに入れるのはプラグインの責任です。こうしたすべての分析と作業は、新しいビルドを開始するたびに何度も発生します。また、監視モードでは、共有されたコードを変更すると、Commonsバンドルになります。

このような分割は、開発ビルドと本番ビルドの両方に役立ちます。しかし、開発環境では、ベンダーとポリフィルに関連するコードの再構築にはかなり時間がかかる可能性があり、実際にそれらの部分を変更していない場合は無駄になる可能性があります(依存するサードパーティのコードが独自のコードベース)。

DllPluginの根拠

開発などの同じ環境で、プロジェクトの作成者はtwo webpack構成を作成しましたが、以前は1つでした。プラグインは実稼働環境に適用できますが、DllPluginは開発においてより意味があると言えます(以下を参照)。

最初のwebpackビルド構成は、いわゆるDLLに必要です。これは、以前に見られた共通コードに似ていますが、正確ではありません。私の理解では、DLLはほとんどの場合、サードパーティのコード(ベンダーとポリフィル)をグループ化し、独自の共有ユーティリティコードはグループ化しない傾向がありますが、これも印象的なことであり、厳密なルールではありません。とにかく、ここでプロジェクトの作成者は、通常の開発セッション中に頻繁に変更されるコードをグループ化する必要があります。開発環境では、たとえば依存関係が変更された場合など、このビルドを時々実行するという考え方があります。そして、通常、開発者は、必要と思われるときにこのビルドを起動します。

他のwebpackビルド構成は、プロジェクト独自のコード、または開発作業中に定期的に変更されるコードに必要です。これは、開発者が何度も繰り返し実行する、または監視モードで実行する実際のビルドです。この時点では、CommonsChunkシナリオで見られる単一のビルドと比較して、非常に高速です。


したがって、全体的には似ているように見えますが、異なるターゲットにヒットさせることができます。開発環境にDllPluginを使用すること(利点:コンパイル時間の短縮)を考慮し、運用にCommonsChunkPluginを使用すること(利点:アプリ変更時の読み込み時間の短縮)を検討できます。繰り返しになりますが、実稼働環境でもDllPluginを使用することもできます。2つのビルドを連続して実行する必要があるというわずかな不便さです。1つはDLL用で、1つはアプリ用です。

HTH

31
superjos

どちらかを使用します。 ここに記事があります 、DllPluginの使用方法を説明します。ページの下部に、同じことを達成するための代替方法があります。違いが何であるか、長所と短所がわかります。これで開始できます。

10
user981375

私もここで違いを探していましたが、そうではないと思います。少なくとも、もうありません。

コード分​​割ライブラリの webpack documenation を見ると、同様のマニフェストファイルを抽出する方法に言及しています。私の理解では、これはDllPluginが行っていることです。ただし、CommonsChunkPluginでやや暗黙的です。

利点は、この種の機能のために複数のWebpack構成を維持する必要がないことです。

4
adam-beck