浅析webpack 如何优雅的使用tree-shaking（摇树优化）

webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如commonJS , AMD , es6 ，我简单的说一下commonJS和es6模块的区别。commonJS模块都被视作一个对象。commonJS的模块输出和 函数的值传递相似，都是值的拷贝即在解析阶段就确定输出的模块，所以es6模块的import一般写在被引入文件的开头。说了这么多那到底如何使用tree-shaking呢？怎么回事，为什么没有被触发tree-shaking优化？这是因为tsc编译后的代码为es5 ，而正因如此，tsc默认使用了commonJS的规范来加载模块，因此并没有触发tree-shaking，那我们要怎么做？修改一下tsconfig.json，把target改为es6即可！