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

webpack 打包优化

还有更好的么

推荐阅读更多精彩内容