(Webpack)如何分块动态模块依赖项

Question

我刚刚意识到,如果你使用动态加载模块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能以某种方式解决这个问题吗？

Answer 1

答案隐藏在配置中 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是此配置的主要部分.来自docs:

如果为真,则选择公共块的所有子项

编辑异步公共块

如果要在块中下载异步公共代码,则应更改上面的配置 async: true

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

来自以下的文档async:

如果为true,则创建新的async commons chunk作为options.chunks的options.name和sibling的子项.它与options.chunks并行加载.可以通过提供所需的字符串而不是true来更改输出文件的名称.

现在创建了仅包含socket.io-client示例的附加块.这与webpack文档中的原始示例很接近.