webpack里面有thunk和module概念,thunk对应的是文件级别的, webpack代码拆分中,很容易出现的问题就是,同一个模块打包到多个thunk文件上面,thunk打包的成一个文件的原理是根据 依赖模块不同抽分成一个thunk, 相关的依赖关系,不重复打包thunk
比如
webpack.ensure() {
require('./lib1.js')
require('./lib2.js')
require('./lib3.js')
}
webpack.ensure() {
require('./lib1.js')
require('./lib2.js')
require('./lib4.js')
}
上面会打包成两个thunk , 第一个thunk里面包含 lib1和lib2, lib3 , 第二个thunk里面包含了lib1和lib2, lib4, 即lib1, lib2重复打包了。
既然重复打包了,那我们得考虑如何在代码切分中,把lib1 和 lib2拆分出来,行成一个文件, 避免重复打包. 之前提供, webpack thunk是根据 依赖的关系决定thunk的,也就是说,如果thunk依赖相同,那么就不会重复打包thunk
webpack.ensure() {
require('./lib1.js')
require('./lib2.js')
webpack.ensure([], () => {
require('./lib3.js')
})
}
webpack.ensure() {
require('./lib1.js')
require('./lib2.js')
webpack.ensure([], () => {
require('./lib4.js')
})
}
上面的话,实际会打包出三个 thunk文件,第一含有 lib1 和 lib2 其他 两个分别含 lib3 和 lib4。异步下载代码的时候,会先下载 含有lib1和lib2的 thunk, 然后下载lib3或者lib4的thunk, 最后执行我们的业务代码,这样的话,就不存在重复打包的文件了。
还有更好的么
上面的代码其实很不优雅, 层层嵌套webpack.ensure 不是一个好方案,对代码维护来说,更加如此。其实我们可以利用promise, 对异步的库进行一层封装
thunk.js
var resolve;
var reject;
var promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
require.ensure([], (require) => {
var lib2 = require('./lib2.js');
resolve(lib2);
});
module.exports = promise;
使用
require('./thunk.js').then((lib2) => {
console.log(lib2);
})
这样的话,把异步库单独放在一个js文件夹,通过返回一个promise来进行异步获取,而且根据模块机制,对promise对象进行缓存,即一旦第一次导入了这个库,以后都会从缓存中获取。
ps: webpack 2.0其实已经实现了 import 异步库的功能,具体可以查看文档