项目大扫除神器：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 也就是静态分析扫不到，可以在这里忽略以消除误报。

最佳实践工作流

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

总结

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

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

参考链接：

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