webpack里面有thunk和module概念，thunk對(duì)應(yīng)的是文件級(jí)別的， webpack代碼拆分中辖源，很容易出現(xiàn)的問題就是儒洛，同一個(gè)模塊打包到多個(gè)thunk文件上面精耐，thunk打包的成一個(gè)文件的原理是根據(jù) 依賴模塊不同抽分成一個(gè)thunk， 相關(guān)的依賴關(guān)系琅锻，不重復(fù)打包thunk
比如
webpack.ensure() {
require('./lib1.js')
require('./lib2.js')
require('./lib3.js')
}
webpack.ensure() {
require('./lib1.js')
require('./lib2.js')
require('./lib4.js')
}
上面會(huì)打包成兩個(gè)thunk , 第一個(gè)thunk里面包含 lib1和lib2, lib3 卦停， 第二個(gè)thunk里面包含了lib1和lib2, lib4, 即lib1, lib2重復(fù)打包了。
既然重復(fù)打包了恼蓬，那我們得考慮如何在代碼切分中惊完，把lib1 和 lib2拆分出來，行成一個(gè)文件处硬， 避免重復(fù)打包. 之前提供, webpack thunk是根據(jù) 依賴的關(guān)系決定thunk的小槐，也就是說，如果thunk依賴相同荷辕，那么就不會(huì)重復(fù)打包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')
})
}
上面的話凿跳，實(shí)際會(huì)打包出三個(gè) thunk文件，第一含有 lib1 和 lib2 其他 兩個(gè)分別含 lib3 和 lib4桐腌。異步下載代碼的時(shí)候拄显，會(huì)先下載 含有l(wèi)ib1和lib2的 thunk， 然后下載lib3或者lib4的thunk案站， 最后執(zhí)行我們的業(yè)務(wù)代碼躬审，這樣的話，就不存在重復(fù)打包的文件了蟆盐。
還有更好的么
上面的代碼其實(shí)很不優(yōu)雅承边， 層層嵌套webpack.ensure 不是一個(gè)好方案，對(duì)代碼維護(hù)來說石挂，更加如此博助。其實(shí)我們可以利用promise， 對(duì)異步的庫進(jìn)行一層封裝
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);
})
這樣的話痹愚，把異步庫單獨(dú)放在一個(gè)js文件夾富岳，通過返回一個(gè)promise來進(jìn)行異步獲取，而且根據(jù)模塊機(jī)制拯腮，對(duì)promise對(duì)象進(jìn)行緩存窖式，即一旦第一次導(dǎo)入了這個(gè)庫，以后都會(huì)從緩存中獲取动壤。
ps: webpack 2.0其實(shí)已經(jīng)實(shí)現(xiàn)了 import 異步庫的功能萝喘，具體可以查看文檔
