17

を使用してモジュールを動的にロードrequire.ensure()すると、webpack は依存関係を分析してチャンクしないことに気付きました。これは、そのようなモジュールが転送されたかどうかを webpack が知ることができないと主張できる何らかの方法で理にかなっていますが、とにかく webpack にその仕事を強制することはできますか?

例は次のとおりです。

app.js :

require.ensure([ 'module1.js' ], ( require ) => {
    // at some point
    require( 'module1.js' );
}, 'Module1');

require.ensure([ 'module2.js' ], ( require ) => {
    // at some point
    require( 'module2.js' );
}, 'Module2');

module1.js

let io = require( 'socket.io-client' );

module2.js

let io = require( 'socket.io-client' );

このコンパイルの結果、これらのモジュールは両方とも socket-io ライブラリ全体をそれぞれのチャンクに「リンク」します。私の当初の期待は、CommonsChunkPluginがそれらをキャッチrequiresし、その大きなライブラリを共通のチャンクに入れることでした。

new webpack.optimize.CommonsChunkPlugin( 'common' ),

ただし、機能しません。もちろん、この依存関係を手動でいつでも「解決」することはできますが、webpack が何らかの方法でそのトリックを実行できることを願っていましたか?

4

2 に答える 2

5

答えはの構成に隠されていますCommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin({
  name: 'main', // Important to use 'main' or not specify, since 'main' is default
  children: true, // Look for common dependencies in all children,
  minChunks: 2, // How many times a dependency must come up before being extracted
});

children: trueこの構成の主要部分です。ドキュメントから：

true の場合、commons チャンクのすべての子が選択されます

非同期共通チャンクの編集

非同期で共通のコードをチャンクでダウンロードする場合は、上記の構成を変更して以下を追加する必要があります。async: true 

new webpack.optimize.CommonsChunkPlugin({
  name: 'main',
  children: true, 
  minChunks: 2, 
  async: true, // modification
});

についてのドキュメントからasync：

true の場合、新しい async commons チャンクが options.name の子および options.chunks の兄弟として作成されます。options.chunks と並行してロードされます。true の代わりに目的の文字列を指定することで、出力ファイルの名前を変更できます。

これで、例からのみを含む追加のチャンクが作成されましsocket.io-clientた。これはwebpack docsの元の例に近いです。

于 2016-09-06T10:39:43.940 に答える
0

So far I found one possible solution. If you use webpack's require.include() method to just include (not evaluate) the "shared library, here socket.io-client" also in the parent module, here app.js, the CommonChunkPlugin will now be able to sort things out correctly.

require.include( 'socket.io-client' ); // import io from 'socket.io-client'; also works
require.ensure([ 'module1.js' ], ( require ) => {
    // at some point
    require( 'module1.js' );
}, 'Module1');

require.ensure([ 'module2.js' ], ( require ) => {
    // at some point
    require( 'module2.js' );
}, 'Module2');

However, this doesn't seem right to me since this IS a manual resolving of dependencies, which is actually not what I want have to do using something like Webpack.

于 2016-09-06T09:57:36.797 に答える