webpack2的Tree sharking，你值得拥有

在2017年2月，webpack官方终于将npm上webpack的latest版本更新到了webpack2，这意味着以后我们默认执行npm install webpack的时候默认安装就是webpack2，这也意味着webpack2已经成熟，准备好替换原先的1版本，终于，这个时代的前端构建巨头，迎来了有史以来的最大一次更新。

这个版本的webpack默认支持import export方式的模块加载方式，这给webpack带来了一项强大的功能：Tree shaking。这项功能有什么好处呢？我们来看下面这个例子：

// a.js
export function add(num1, num2) {
  return num1 + num2
}

export function reduce(num1, num2) {
  return num1 - num2
}

export default {
  add: add,
  reduce: reduce
}

// b.js
import {add} from './a.js'

console.log(add(1, 2))

这时候我们用webpack打包b.js，在打包后的文件中会出现这样的代码：

webpack

这里有个/* unused harmony export reduce */，有了这句话，在我们使用webpack的UglifyJsPlugin的时候，就会将reduce函数的代码删除。需要注意的是，如果我们在a.js中加入export default {add, reduce}，在b.js中通过import a from './a.js'，来调用，那么就无法使用tree sharking，这时候我们可以怎么办呢？可以这么写import * as a from './a.js'