Webpack2 tree shaking 之旅

背景:最近webpack升级了2.0的版本，支持代码静态依赖解析打包了。吓得我赶紧弄个小demo出来试试水。本文默认读者都有一定的webpack使用经验，没使用过webpack的同学最好先看下相关文档。

静态依赖打包可以去掉很多无用的代码，减少文件体积。下面两张图片是楼主打包的两个文件，一个是使用tree shaking，一个是没使用的，都是为了引用一个方法encodeHTML。对比下生成文件的差异。

普通require模式引入

 

es6 tree shaking

 

可以看到tree shaking 只打包了我们需要的那个方法。楼主的demo支持打包多页面，地址在最下面，各位小伙伴可以自己clone下来看看。

看完了tree shaking的效果，下面我们来讨论以下几点

1. 如何开启webpack2的tree shaking功能

2. Webpack2配置注意事项

3. ES6模块编写注意事项

4.  一些配置优化点

<