(Webpack)如何对动态模块依赖进行分块
(Webpack)如何对动态模块依赖进行分块
提问于 2016-09-01 20:59:16
我刚刚意识到，如果你使用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');模块1.js
let io = require( 'socket.io-client' );模块2.js
let io = require( 'socket.io-client' );编译的结果是，这两个模块都将整个socket-io库“链接”到它们的块中。我最初的期望是，CommonsChunkPlugin将捕获这些requires，并将大的库放入一个公共块中。
new webpack.optimize.CommonsChunkPlugin( 'common' ),然而，它不起作用。当然，我总是可以手动“解决”这种依赖，但我希望webpack能以某种方式做到这一点？
回答 1
Stack Overflow用户
发布于 2016-09-06 17:57:37
到目前为止，我找到了一个可能的解决方案。如果您使用webpack的require.include()方法仅包含(而不是求值)父模块中的“共享库，此处为socket.io-client”，则CommonChunkPlugin现在将能够正确地进行排序。
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');然而，这对我来说似乎并不正确，因为这是一个手动解析依赖项的过程，这实际上不是我想要使用像Webpack这样的东西所做的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39272209
复制相关文章
相似问题
腾讯云开发者
