关于前端:利用Tree-Shaking剔除源码中的dead-code

Tree Shaking 简介

Tree shaking 是一个术语，通常用于形容移除 JavaScript 上下文中的未援用代码(dead-code) 更加具体的介绍能够移步官网文档 Tree Shaking | webpack 中文文档 简略来说 tree shaking 分三步

1. 动态剖析，收集模块中的导出值，存在 ModuleGraph 中

2. 标记哪些导出值有被其余模块用到，没有用到的就被标记为 dead code
3. 利用工具 (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 中找到咱们未应用的变量

然而还存在两个问题

1. webpack 也会标记依赖包中的 dead code，对咱们来说没有任何用，须要过滤掉
2. 变量名会反复，比方 / unused harmony export fields / 这句, fields 这种命名在咱们我的项目中十分多，所以除了未应用的变量名须要记录，还须要记录一下对应的文件地址

下面两个问题都不算太简单，然而鉴于咱们我的项目中应用的 webpack 版本，配置均不太一样，所以还在测试中…搞定了后会收回来给大家 review