webpack 打包优化

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 异步库的功能，具体可以查看文档