应用场景
我们打包的源文件中引用了某个模块的一部分的时候，打包的时候却会把整个模块都打包进去，会造成打包后文件体积过大。此时就可以用tree shaking仅把我们需要的那部分代码打包进去，而把模块中我们用不到的部分“shaking”掉。正式一点的说法就是：移除上下文中的未引用代码。
注意点
由于webpack中的tree shaking是依赖于ES5中的静态结构特性，所以仅适用于模块是用ES Module引入方式的模块（即用import）。
实现
开发模式下：
在webpack配置文件中新增一个配置项：
1 | optimization: { |
在package.json中新增一个配置项：‘sideEffests’。可以把不需要tree shaking的文件用数组的写法写在这个配置项中，eg. css文件；如果没有则写为false。
PS：在开发环境中，tree shaking并打包之后并不会把模块多余的代码从打包完成的文件中删除，而只是会注释哪些是我们用到的代码，哪些是不用的代码。
生产模式下：
只需要在package.json中新增一个配置项：‘sideEffests’。打包过程会默认进行tree shaking。并且会把多余的代码从打包完成的文件中删除