Tree Shaking简介
Tree shaking 是一个术语，通常用于形容移除 JavaScript 上下文中的未援用代码(dead-code) 更加具体的介绍能够移步官网文档Tree Shaking | webpack 中文文档 简略来说tree shaking分三步
- 动态剖析，收集模块中的导出值，存在ModuleGraph中
- 标记哪些导出值有被其余模块用到，没有用到的就被标记为 dead code
- 利用工具(terser, UglifyJS)这类工具 删除掉这类死代码
剔除源码中的dead code
通过下面的简介，咱们能够晓得tree shaking删除的是构建产物中的无用代码。那么进一步能够思考：这些无用代码是不是能够能够间接在咱们我的项目源码中被找进去并且删除掉。这不仅仅能缩小代码体积，同时也是在减少咱们我的项目的可维护性。
目前现有的库比方 unimported,UnusedWebpackPlugin,deadfile 等等只反对查找未被应用的文件，而不是具体变量，而且不太精确(试了一下，体验都不太好)
比方不反对 export { default as SearchSelect } from ‘./SearchSelect’; 这种语法
既然这样那么不如本人入手开始钻研。
首先，批改webpack的配置为：
{ mode: 'development', //防止production模式下 deadcode曾经被删除了，无奈反向定位源码 optimization: { usedExports: true,// 启动标记性能 },}这样打包进去的代码就是
咱们能够由图上看出，通过未应用的代码都曾经通过/* unused harmony exports */标记进去了(当然理论状况会简单一些，这里只是大略介绍，不开展细说)。
那么接下来就，咱们能够通过node对文件内容做正则匹配，找到构建产物中的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这种命名在咱们我的项目中十分多，所以除了未应用的变量名须要记录，还须要记录一下对应的文件地址
下面两个问题都不算太简单，然而鉴于咱们我的项目中应用的webpack版本，配置均不太一样，所以还在测试中…搞定了后会收回来给大家review