Tree Shaking简介
Tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 更加详细的介绍可以移步官方文档Tree Shaking | webpack 中文文档 简单来说tree shaking分三步
- 静态分析，收集模块中的导出值，存在ModuleGraph中
- 标记哪些导出值有被其他模块用到，没有用到的就被标记为 dead code
- 利用工具(terser, UglifyJS)这类工具 删除掉这类死代码
目前现有的库比如 unimported,UnusedWebpackPlugin,deadfile 等等只支持查找未被使用的文件，而不是具体变量，而且不太准确(试了一下，体验都不太好)
比如不支持
export { default as SearchSelect } from ‘./SearchSelect’;
这种语法既然这样那么不如自己动手开始研究。
首先，修改webpack的配置为：
{
mode: 'development', //避免production模式下 deadcode已经被删除了，无法反向定位源码
optimization: {
usedExports: true,// 启动标记功能
},
}这样打包出来的代码就是
文章图片
我们可以由图上看出，通过未使用的代码都已经通过
/* unused harmony exports */标记出来了(当然实际情况会复杂一些，这里只是大概介绍，不展开细说)。那么接下来就，我们可以通过node对文件内容做正则匹配，找到构建产物中的dead code对应的 源码。
文章图片
这样一来，我们就可以根据命令行输出的内容，对我们项目中的代码进行排查，从而删除无用代码
如何在项目中使用 【利用Tree|利用Tree Shaking,剔除源码中的dead code】因为我们公司现有的前端框架使用的是umi，首先对umi配置做调整
chainWebpack(config) {
config.optimization.usedExports(true);
config.mode('development');
config.output.filename('index.js');
},
//同时需要将devtool设置为false，通过chainWebpack的config设置的方式并不生效这样的话，就可以在dist/index.js中找到我们未使用的变量
文章图片
但是还存在两个问题
- webpack也会标记依赖包中的 dead code，对我们来说没有任何用，需要过滤掉
- 变量名会重复，比如 / unused harmony export fields /这句, fields这种命名在我们项目中非常多，所以除了未使用的变量名需要记录，还需要记录一下对应的文件地址
