公司有一个数据BI平台，它的起源是一个开源型的项目DataEase（一个开源数据可视化分析工具，帮助用户通过拖拽交互做仪表搭建和视图制作、分享的低代码平台。
关于DataEase：
官网地址：https://dataease.io/index.html
github代码地址：https://github.com/dataease/dataease/
一、问题背景
在接手这个项目的时候，它距离第一次代码提交已经有22个月，代码量共计约16w行代码左右。而因为是基于开源代码库加以修改的，很多文件的最近一次更新甚至还是在22个月前（也就是首次提交的时候），很多代码的存在可能随着某些功能被放弃，也已经不再被需要了，但是前面的维护同学也没有勇于做必要的删除。
对于我这个现任的代码维护者，就经常遇到看到某一个功能点，依据代码debug后到某个组件上，再查看组件的调用时候有N个调用方。但是评估改动的影响面和工作量后，一个个找出来却发现很多个调用方根本早就是被废弃了，属于不该存在的调用方。多次这样的情况发生之后，这就很困扰我的开发效率。所以决心好好整治一下这些被废弃的，不该存在的冗余代码。
二、方案思考
想找出哪些组件（或者文件）是无用的，最先想到的肯定是构建编译时候，构建工具可以基于ES module的静态分析对冗余节点做Tree shaking的机制。那么我们是不是可以从结果出发来倒推，把被Tree shaking掉的节点文件都找出来呢？
Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码 (dead-code) 行为的术语。
它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。
在现代 JavaScript 应用程序中，我们使用模块打包 (如webpack或Rollup) 将多个 JavaScript 文件打包为单个文件时自动删除未引用的代码。这对于准备预备发布代码的工作非常重要，这样可以使最终文件具有简洁的结构和最小化大小。
以webpack为例，能做编译构建后的资源分析的插件有webpack-bundle-analyzer , @statoscope/webpack-plugin等。
三、实现方案
1、拿到工程里所有待检测的文件
我这里是直接通过shell脚本的方式得到src下所有的.js, .ts, .vue文件的文件名，然后输出到output.txt文件。也有同学提到，可以直接fast-glob这个包来做文件名收集，当然也是可以的。用你喜欢的就好。
# 进入到src文件夹下
cd src
# 找到所有的.js, .ts, .vue文件的文件名，输出到src/output.txt文件
find . -type f ( -name "*.js" -o -name "*.ts" -o -name "*.vue" ) -exec echo {} ; > output.txt
下面这是得到的.js, .ts, .vue所有文件的文件路径（示例）：
App.vue
websocket/index.js
plugins/Blob.js
layout/index.vue
layout/mixin/ResizeHandler.js
layout/components/Sidebar/index.vue
…………
# 共计706个文件
修改一下上面的shell脚本，就可以获取到所有的图片文件（这里主要是：.png, .jpeg, .jpg, .svg文件），脚本文件：
# 进入到src文件夹下
cd src
# 找到所有的.js, .ts, .vue文件的文件名，输出到src/output.txt文件
find . -type f ( -name "*.png" -o -name "*.jpeg" -o -name "*.jpg" -o -name "*.svg" ) -exec echo {} ; > outputImage.txt
得到的图片类文件的文件outputImage.txt：
components/canvas/assets/title.jpg
components/canvas/assets/bg-kj-1.jpg
components/canvas/assets/iconfont/iconfont.svg
icons/svg/task.svg
icons/svg/arrow-down.svg
icons/svg/system.svg
icons/svg/web-msg.svg
icons/svg/eye-open.svg
……
# 共计191个文件
二、选择一个静态资源编译工具做Tree-shaking检测
1、Webpack-bundle-analyzer
Webpack-bundle-analyzer的使用比较广泛，github的star数也相当多。我这里是基于Vue-cli v5的vue项目，本身是已经集成了Webpack-bundle-analyzer插件，只需要在构建的时候在命令后加上--report就可以在构建的时候同时产出report.html文件，打开后如下图所示：
[图片上传失败...(image-ebf446-1713856065422)]
这里可以看到构建后的产出的静态资源文件，以及每个资源包的构成分别是哪些依赖包或者业务文件。
React工程的话可以自行参考webpack官网来进行配置：https://webpack.js.org/api/cli/#analyzing-bundle
2、 @statoscope/webpack-plugin
@statoscope/webpack-plugin的功能类似于webpack-bundle-analyzer，虽然star数稍微低一点，但是功能也很强。配置用法可以自行参考其github地址：https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin
我这里的配置仅代表我本身，毕竟我这只是个vue-cli项目的vue.config.js的配置：
if (process.env.VUE_APP_RUN_ENV !== 'development') {
plugins = plugins.concat([
new BundleStatsWebpackPlugin({
json: false,
html: true,
outDir: './reports',
}),
new StatoscopeWebpackPlugin({
saveReportTo: path.resolve(__dirname, 'dist/reports/statoscope-report.html'),
saveStatsTo: path.resolve(__dirname, 'dist/reports/statoscope-report.json'),
normalizeStats: false,
saveOnlyStats: false,
disableReportCompression: false,
statsOptions: {},
watchMode: false,
name: 'some-name',
open: false,
compressor: 'gzip',
reports: [],
extensions: [],
}),
])
}
来看一下编译生产的report/statoscope-report.html文件：
[图片上传失败...(image-bcc8d9-1713856065422)]
它有一个EntryPoints入口和Modules入口，前者是基本入口分析都引用了谁，后者是反向的根据模块来分析它被谁调用了。
基于这些我就可以分析到底哪些文件是有出现在构建的结果里的。尤其是 @statoscope/webpack-plugin的构建结果，可以看到除了report/statoscope-report.html，还生成了一个report/statoscope-report.json文件。这里正式描述依赖关系的文件，这个很重要。是下面要用到的文件。
三、检测未被引用的文件
下面就是利用这些文件路径来检测哪些是未被引用过的，附检测的脚本代码：
const fs = require('fs')
const readline = require('readline')
const filePath = './output.txt' // 替换为你的文本文件路径
const readStream = fs.createReadStream(filePath)
const rl = readline.createInterface({
input: readStream,
crlfDelay: Infinity, // 处理Windows的换行符
})
const lines = []
rl.on('line', (line) => {
// 每行的内容将会触发这个回调
lines.push(line)
})
rl.on('close', () => {
// 文件读取完毕
console.log('文件读取完毕') // 输出包含每行字符串的数组
})
const largeFilePath = '../dist/reports/statoscope-report.json' // 替换为你的大文件路径
// const targetString = 'yourTargetString' // 替换为你要查找的字符串
const readStream2 = fs.createReadStream(largeFilePath)
const rl2 = readline.createInterface({
input: readStream2,
crlfDelay: Infinity, // 处理Windows的换行符
})
const foundStrings = new Set()
rl2.on('line', (line) => {
// 在每一行中查找目标字符串
lines.forEach((targetString) => {
if (!line.includes(targetString)) {
foundStrings.add(targetString)
}
})
})
rl2.on('close', () => {
// 文件读取完毕，输出所有找到的字符串
const resultArray = Array.from(foundStrings)
console.log('check end')
const resultPath = './NoReferenceResult.txt'
// 将字符串写入文件
fs.writeFile(resultPath, resultArray.join('\n'), (err) => {
if (err) {
console.error('Error writing to file:', err)
} else {
console.log('File written successfully:', resultPath)
}
})
})
这里检测结果的产物是一个NoReferenceResult.txt文件，这里直接贴一下结果：
components/TreeSelector/index.vue
components/SizeSelect/index.vue
components/LangSelect/index.vue
components/Notification/index.vue
components/GridButton/index.vue
components/business/complex-table/index.vue
……
# 共计135个文件
这里未被引用的文件合计有2w多行代码，差不多占据了总代码行数的14%左右的代码量了。
同样的还有未被引用过的图片：
components/canvas/assets/iconfont/iconfont.svg
icons/svg/table-pivot.png
assets/theme-dark.png
assets/theme-custom.png
assets/panel/show_all.png
assets/drag-indicator.png
assets/banner.png
assets/DataEase-black.png
assets/fill_radio.png
assets/deV.png
assets/theme-default.png
assets/DataEase-color.png
assets/blue_1.svg
assets/login-desc.png
assets/template.png
assets/avatar.jpeg
……
# 30多个未被引用过的图片文件
四、后续
第一次检测出这么多文件的时候，我是及其震惊的。竟然有这么多无用的代码，2w多行啊！！当时删除的时候还是对着这些文件名一个个在代码里做了搜索的，确实是一处引用都没有，才敢放心删除。删除后又灰度了两周才敢推全量上线的，但事实证明：屁事没有啊，干就完了兄弟们。
亲身经历证明，删代码可比写代码解压太多了哇~！！
