`import（）`チャンク（Webpack 2.2）を使用して共有コードのチャンクを制御する方法

Question

webpackバージョン2.2.0を使用する。

私は単一のentry設定のページアプリケーションを持っています：entry: { app: ['./js/main.js'] }。これは、コード分割のためにビューを動的にロードしてimport('./js/views/1')を経由するアプリケーションです。

私が抱えている問題は、生成されたviews/1,views/2などです。作成されるファイルには、内部に重複したモジュールが1つあります。ファイルとその内容は次のようになります。

• メイン：./js/main.js
  • 0：./js/views/1.js
  • ./js/modules/a.js
  • ./js/modules/b.js
  • 1：./js/views/2.js
  • ./js/modules/b.js
  • ./js/modules/c.js

views/1.jsとviews/2.jsの両方が共有modules/b.jsモジュールの完全なコピーを持っていることに注意してください。私の場合、私は数十のビューとより多くの共有モジュールを持っていますので、複製は私にとって大きな懸念です。ここで `WebPACKのバンドル・アナライザ」は次のようになります。

私はアドレスにこれを助けるためにCommonChunkPluginを追加しようとしましたが、まったくのダイナミック輸入に影響を与えていないようです。

私が探しているのは、webpackが自動的にすべての共有モジュールを別々のファイルに移動する方法です。

• メイン：：01​​
  • 0：./js/views/1.js
  • 1：./js/views/2.js
  • 2：./js/modules/a.js
  • 3：./js/modules/b.js
  理想的には、私は出力にWebPACKの次のチャンクをしたいと思います
  • 4：./js/modules/c.js

したがって、各モジュールは文字通り別々のチャンクです。これは、HTTP2を使用してロードする最も最適な方法です。ここで

は、サンプルプロジェクトのコードです：https://github.com/EvNaverniouk/webpack-code-splitting

は、どのように私はこれを達成することができますか？

私はこれが、この問題に関連していると信じて：https://github.com/webpack/webpack/issues/3981

Answer 1

重複エラーを解決するには、WebPACKの最適化パッケージで提供さCommonsChunkPluginを使用することができます。 documentationによって示され、以下を実行します。

エントリポイント間で共有される共通モジュールを含む余分なチャンクを生成します。

2番目の問題については、説明しているとおり、それはうんざりの仕事になります。 Gulpは入力ストリームを受け取り、そのストリームをファイルに出力します。基本的に元のファイルの1つ1つのコピーを作成し、その後、蒸散、コンパイルなど。

ブラウザ用に非常に多くのHTTPリクエストを作成するため、かなり時間がかかるので、2番目の構造はおすすめしません。特に、WebサイトがHTTP/1.1プロトコルで動作している場合。クライアントがより多くのコンテンツをより少ないファイルでダウンロードできるようにすることは、通常、より有益です。