webpack之tree shaking

tree shaking是webpack2中提出的概念，tree shaking就是在打包时用来消除未引用代码(dead-code)，减少打包后代码的体积，进而减少加载的时间，实现用户体验的优化。

tree shaking的概念最早是由rollup作者 Rich Harris 提出的：

若是将代码打包的过程比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌，然后放入烤箱，最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌，最后直接作出蛋糕。

原理

tree shaking依赖ES2015(简称ES6)模块系统中的静态结构特性，例如 import 和 export。

ES6 模块化特点：可以参考阮老师的文章Module语法

一句话概括就是：取其精华,去其糟粕，将有用的代码进行打包，去除无用的代码，缩减代码的体积

1. webpack在打包的时候，对未使用的函数、类、对象等变量进行标记，将其标记未unused harmony export

2. 进行代码压缩，删除未使用的代码

在index.js中，引入math.js中cube方法

index.js

在math.js中定义两个方法，cube和square

math.js

在math文件中的square方法没有没引用，被视为dead code，所以当我们在打包的时候，需要删除。

webpack文件配置如下：

webpack.config.js

注意，在webpack配置文件中，需要加optimization.usedExports, 在进行打包时，会对未使用的代码进行标记, 下图是打包后的代码， unused harmony export 代码未使用

bundle.js

最后引入一个能够删除未引用代码(dead code)的压缩工具(minifier)来删除标记无用的代码。

optimization: {

usedExports: true,

minimize: true,

minimizer: [new TerserPlugin()],

这样打包的代码后，就会删除square函数。

tree-shaking配置的前提是，代码必须采用es6代码编写；通过对代码进行标记，对代码进行优化操作