前端废代码扫描

背景

前段时间对手头上的项目进行了一次大的重构，重构之后有很多代码是被迁移到其他包里面，重构的时候由于时间关系和风险，所以还保留了一些无用的代码，其中包括各种ts定义的类型，react组件，常量变量等等。另外再加上之前项目的api经过多次的调整，现在已经是v3的版本，代码中依旧存在着各种v1 v2的api声明，这些api基本上属于废弃不可用状态。所以在做完调整之后，要对前端废弃无用代码进行移除，这里就涉及到了前端废代码扫描的能力。

目标

对存量代码进行一次清洗，移除已经废弃的代码，对于只在当前文件使用的类型常量等不再使用export

选型

ts-prune
knip
这两个笔者都简单尝试过，体验上两者都还不错，knip相对而言配置比较丰富，支持的插件也比较多，扫描结果展示也美观一些，而且还在迭代。ts-prune是进入维护阶段，总体上使用起来也是比较简单，想要快速体验下也是一个不错的选择。这里笔者因为是在不同时期用了不同的选项，所以都简单记录一下。

ts-prune扫描

这个相对比较简单，不用把依赖装在项目中，直接npx运行即可

npx ts-prune

或者直接在在package.json中增加一个命令，然后每次执行命令即可

"scripts": {
    "find-deadcode": "npx ts-prune"
}

可以根据自己的实际情况添加配置，我们看下官方的配置

• -p, --project - tsconfig.json path(tsconfig.json by default)
• -i, --ignore - errors ignore RegExp pattern
• -e, --error - return error code if unused exports are found
• -s, --skip - skip these files when determining whether code is used. (For example, .test.ts? will stop ts-prune from considering an export in test file usages)
• -u, --unusedInModule - skip files that are used in module (marked as used in module)

这里我们就按照自己的实际情况增加配置即可，笔者扫描的时候需要过滤掉部分路径，所以增加-i参数指定路径

"scripts": {
    "find-deadcode": "npx ts-prune -u -i packages/*"
}

看下扫描出来的结果，（used in module）这个标记的就是有在用的，没有标记出来的就是没有使用，我们可以根据实际情况来删除无用代码

knip接入使用

添加包

rush add -p knip --dev

我们在项目的目录下增加一个knip.json配置文件，根据自己的实际情况填写配置，录入扫描的入口文件，还有文件的一些匹配规则，比如笔者的项目中有单测文件，这种不需要扫描，所以增加规则过滤掉这部分。配置参考如下：

{
  "entryFiles": ["src/App.tsx"],
  "projectFiles": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "!src/**/*.test.ts", "!src/**/*.test.tsx"]
}

执行knip命令

排查一下发现，比较新的版本需要比较高的版本，这里升级一下node版本

nvm install v18.12.1

可以看到knip的扫描结果会更加丰富一些，可以具体到文件 包依赖 无用的exports等，当然依赖这一块不一定非常可靠，还得人工自己判断一下

处理代码

处理代码就相对简单点，我们根据上面扫描的结果直接移除无用代码即可，再加上本地的eslint prettier之类的工具处理下代码格式，这样就完成了我们的废代码扫描处理。