TreeShaking简介TreeShaking是一个术语，通常用于描述在JavaScript上下文中移除未引用代码（死代码）。更详细的介绍可以参考官方文档TreeShaking|webpack中文文档简单来说，treeshaking分为静态分析三个步骤，收集模块中的导出值，并将它们存储在ModuleGraph中，以标记哪些导出值被其他模块使用，而那些没有被使用的标记为死代码利用工具（terser、UglifyJS）和其他工具来删除这些死代码并从源代码中去除死代码。通过上面的介绍，我们可以知道treeshaking删除的是构建产品中无用的代码。那么我们可以进一步思考：是否可以直接在我们项目的源代码中找到并删除这些无用的代码。这不仅减少了代码量，还增加了我们项目的可维护性。目前已有的库如unimported、UnusedWebpackPlugin、deadfile等只支持查找未使用的文件，不支持查找具体的变量，而且不是很准确（试试看，体验不是很好）比如不支持export{defaultasSearchSelect}from'./搜索选择';既然这种语法是这样的，不如自己开始研究吧。首先，修改webpack的配置为：{mode:'development',//避免deadcode在生产模式下已经被删除，无法逆向源码。代码是我们从图中可以看出，未使用的代码已经用/*unusedharmonyexports*/标明了（当然实际情况会更复杂，这里只是笼统的介绍，不做细说）。那么接下来，我们可以使用node对文件内容做正则匹配，找到构建产品中死代码对应的源代码。这样我们就可以根据命令行的输出内容来检查我们项目中的代码，从而删除无用的代码。调整chainWebpack(config){config.optimization.usedExports(true);config.mode('开发');config.output.filename('index.js');},//还需要设置devtool为false，通过chainWebpack的config设置方法不生效。在这种情况下，我们可以在dist/index.js中找到我们未使用的变量，但仍然存在两个问题。webpack也会在依赖包中标记死代码，这对我们来说算不了什么。使用，需要过滤掉会重复的变量名，比如这句/unusedharmonyexportfields/，我们项目中字段名很多，所以除了需要记录未使用的变量名外，还需要记录上面对应的文件地址两个问题都不算太复杂，但是鉴于我们项目中使用的webpack版本，配置不尽相同，所以还在测试中。。。我发出来给大家审阅当它完成时
