首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >(Webpack)如何对动态模块依赖进行分块

(Webpack)如何对动态模块依赖进行分块
EN

Stack Overflow用户
提问于 2016-09-01 20:59:16
回答 1查看 2.3K关注 0票数 17

我刚刚意识到,如果你使用require.ensure()动态加载模块,webpack将不会一起分析和分块依赖项。这在某种程度上是有道理的,有人可能会争辩说,webpack不知道这样的模块是否会被转移,但我们能强迫webpack做这项工作吗?

示例如下:

app.js

代码语言:javascript
复制
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

代码语言:javascript
复制
let io = require( 'socket.io-client' );

模块2.js

代码语言:javascript
复制
let io = require( 'socket.io-client' );

编译的结果是,这两个模块都将整个socket-io库“链接”到它们的块中。我最初的期望是,CommonsChunkPlugin将捕获这些requires,并将大的库放入一个公共块中。

代码语言:javascript
复制
new webpack.optimize.CommonsChunkPlugin( 'common' ),

然而,它不起作用。当然,我总是可以手动“解决”这种依赖,但我希望webpack能以某种方式做到这一点?

EN

回答 1

Stack Overflow用户

发布于 2016-09-06 17:57:37

到目前为止,我找到了一个可能的解决方案。如果您使用webpack的require.include()方法仅包含(而不是求值)父模块中的“共享库,此处为socket.io-client”,则CommonChunkPlugin现在将能够正确地进行排序。

代码语言:javascript
复制
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这样的东西所做的事情。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39272209

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档