项目大扫除神器：Knip —— 将你的代码库“瘦身”到底

在现代前端开发中，随着项目迭代周期的拉长，代码库中往往会堆积越来越多的"僵尸代码"：不再使用的组件、废弃的工具函数、遗留在 package.json 中的依赖项......这些冗余不仅增加了项目的维护成本，拖慢了构建速度，还可能因为未及时更新的废弃依赖带来安全隐患。

通常我们可能会用 ESLint 来检查未使用的变量，或者手动定期清理。但对于跨文件的未使用导出、或者整个未被引用的文件，普通的 Linter 往往无能为力。

今天我要介绍的这款神器 ------ Knip，就是为了解决这个问题而生的。它像一把锋利的瑞士军刀，能精准地切割掉你项目中的那些"累赘"。

什么是 Knip？

Knip 是一个基于 TypeScript 编写的命令行工具，专门用于查找 JavaScript 和 TypeScript 项目中的未使用文件、依赖项和导出。

与传统的 Linter 不同，Knip 不仅仅盯着单个文件看，它会分析整个项目的依赖关系图。这意味着它能发现那些"虽然被定义了且没有语法错误，但实际上从未被其他文件引用过"的孤立代码。

Knip 的核心绝技

Knip 的功能非常强大，主要涵盖以下几个方面：

1. ✂ 查找未使用的文件 (Unused Files)

它能找出项目中那些静静躺着却从未被导入过的文件。

2. 查找未使用的依赖 (Unused Dependencies)

它会扫描你的 package.json，告诉你哪些 dependencies 和 devDependencies 实际上在代码中一次都没用到。这对于清理陈旧依赖非常有帮助。

3. 查找未使用的导出 (Unused Exports)

这是 Knip 最杀手级的功能。通过分析导入导出关系，它能找出那些被 export 出来，但不仅当前文件没用，整个项目其他地方也没用的变量、函数或类。

4. 查找未列出的依赖 (Unlisted Dependencies)

反过来，它也能帮你发现那些你在代码里 import 了，但忘记写在 package.json 里的依赖，避免上线后因为缺包而 crash。

5. 强大的生态支持

Knip 内置了对各种主流框架和工具的插件支持，包括但不限于：

• Next.js
• Vite, Webpack, Rollup
• Jest, Vitest
• Tailwind CSS
• Storybook
• GitHub Actions 等等

这意味着它能理解这些工具的配置文件和特定用法，不会误报（比如把 Next.js 的 pages 目录下的文件当成未使用文件）。

快速上手

安装

你可以将 Knip 作为开发依赖安装到你的项目中：

npm install -D knip typescript @types/node
# 或者
yarn add -D knip typescript @types/node
# 或者
pnpm add -D knip typescript @types/node

注意：Knip 依赖 TypeScript 进行分析，即使你是 JS 项目也建议安装。

配置 script

在 package.json 中添加一个脚本：

{
  "scripts": {
    "knip": "knip"
  }
}

运行

在终端执行：

npm run knip

Knip 会开始扫描你的项目，并输出一份详细的报告，列出所有疑似未使用的项目。

进阶配置

虽然 Knip 很有"眼力见"，能够自动识别很多配置，但对于复杂的项目，你可能需要一个 knip.json (或 knip.ts, knip.js) 配置文件来微调它的行为。

例如，指定入口文件（Entry files）和忽略特定的文件或依赖：

{
  "$schema": "https://unpkg.com/knip@5/schema.json",
  "entry": ["src/index.ts", "src/cli.ts"],
  "project": ["src/**/*.ts!"],
  "ignore": ["src/legacy/**"],
  "ignoreDependencies": ["eslint-config-prettier"],
  "ignoreExportsUsedInFile": true
}

• entry: 告诉 Knip 从哪里开始分析依赖图。通常是你的 main 文件或页面入口。
• ignore: 忽略某些文件不进行检查。
• ignoreDependencies: 有些依赖可能是全局使用的或者通过 Babel 插件注入的，Knip 也就是静态分析扫不到，可以在这里忽略以消除误报。

最佳实践工作流

1. 初次扫描 ：运行 knip，你会大概率被吓一跳（甚至有成百上千个报错）。不要慌，这很正常。
2. 排除误报 ：仔细检查报告。如果是工具配置（如 Jest 配置、Webpack 配置）被误报，检查是否需要启用对应的 Knip 插件或在 knip.json 中配置入口。
3. 逐步清理 ：
   • 先删文件：未使用的文件是最容易确认和删除的。
   • 再删依赖 ：确认 package.json 中未使用的依赖，卸载它们。
   • 最后处理导出 ：对于未使用的 export，你可以选择删除导出关键字变成局部变量，或者直接删除该函数。
4. CI 集成 ：将 knip 加入到你的 CI 流程中（如 GitHub Actions）。这样每次提交 MR 时，Knip 都会自动检查，防止新的"垃圾代码"混入主分支。

总结

代码库的维护就像打扫房间，不仅要勤拂拭，更要定期"断舍离"。Knip 为我们提供了一个上帝视角，让我们能清晰地看到项目中那些被遗忘的角落。

建议大家都在自己的项目中试运行一下 Knip，相信我，它一定会给你带来"惊喜"（或者是惊吓，哈哈）。让我们的项目保持轻量、整洁，从使用 Knip 开始！

---

参考链接：

• Knip 官方文档: knip.dev/
• Knip GitHub 仓库: github.com/webpro/knip