Knip 代码清理工具使用实践

项目背景

本次清理的是一个基于 Next.js 14 和 NextUI v2 的项目模板。通过使用 Knip 工具，我们对项目进行了全面的代码清理，包括未使用的文件和依赖项的清理。

清理过程

1. 文件清理

我们删除了以下未使用的文件：

• 配置文件：config/fonts.ts、config/site.ts
• 脚本文件：scripts 目录下的初始化脚本
• 类型定义：types/index.ts

2. 依赖清理

移除的依赖项

从 package.json 中移除了多个未使用的依赖：

• UI 相关：@iconify/react、@react-aria/ssr、@react-aria/visually-hidden
• 国际化：next-intl、intl-messageformat
• 工具库：clsx、uuid、zod、jsonwebtoken
• 主题：next-themes
• 数据库：pg
• 其他：@vercel/speed-insights、isomorphic-dompurify 等

移除的开发依赖

• ESLint 相关插件
• sass-loader
• tailwind-variants

3. 依赖补充

添加了项目中实际使用但未在 package.json 中声明的依赖：

• @tanstack/react-query-devtools
• @eslint/eslintrc
• @tailwindcss/forms

4. Knip 配置优化

更新了 knip.json 配置文件，在 ignoreDependencies 中添加了必要的开发工具：

{
  "ignoreDependencies": [
    "@types/*",
    "typescript",
    "eslint",
    "prettier",
    "postcss",
    "tailwindcss",
    "autoprefixer",
    "@next/eslint-plugin-next"
  ]
}

清理效果

1. 删除了所有未使用的文件，减少了项目体积
2. 移除了约 20 个未使用的依赖项，优化了项目依赖树
3. 补充了缺失的依赖，确保项目正常运行
4. 优化了 Knip 配置，更好地支持后续的代码维护

经验总结

1. 使用 Knip 工具可以有效识别未使用的文件和依赖
2. 在移除依赖前需要仔细评估其必要性
3. 保留基础开发工具的依赖很重要，即使它们可能被 Knip 标记为"未使用"
4. 定期进行代码清理可以帮助维持项目的整洁性和可维护性

后续建议

1. 定期运行 Knip 检查，及时清理无用代码
2. 在添加新依赖时要谨慎，避免引入不必要的包
3. 保持 knip.json 配置的更新，确保其符合项目需求
4. 考虑将 Knip 检查集成到 CI/CD 流程中

通过这次清理，项目变得更加精简和易于维护，为后续的开发工作打下了良好的基础。

Knip 简介

Knip 是一个强大的 JavaScript/TypeScript 项目代码清理工具，可以帮助我们发现：

• 未使用的文件
• 未使用的依赖
• 未列出的依赖（使用了但未在 package.json 中声明）
• 配置问题

使用方法

1. 安装 Knip

pnpm add -D knip

2. 配置 Knip

创建 knip.json 配置文件：

{
  "$schema": "https://unpkg.com/knip@latest/schema.json",
  "entry": ["app/**/*.{ts,tsx}", "pages/**/*.{ts,tsx}"],
  "project": ["**/*.{ts,tsx}"],
  "ignore": ["**/*.d.ts"],
  "ignoreDependencies": [
    "@types/*",
    "typescript",
    "eslint",
    "prettier",
    "postcss",
    "tailwindcss",
    "autoprefixer"
  ]
}

3. 添加 npm 脚本

在 package.json 中添加：

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

4. 运行检查

pnpm knip

实践案例

初次运行发现的问题

运行 pnpm knip 后，发现以下问题：

1. 未使用的文件（7个）：

config/fonts.ts             
config/site.ts              
scripts/check-users.ts      
scripts/create-admin.ts     
scripts/init-categories.ts  
scripts/migrate.ts          
types/index.ts

2. 未使用的依赖（14个）：

@iconify/react               
@react-aria/ssr              
@react-aria/visually-hidden  
@vercel/speed-insights       
clsx                         
intl-messageformat           
isomorphic-dompurify         
jsonwebtoken                 
next-intl                    
next-themes                  
pg                           
save                         
uuid                         
zod                         

3. 未使用的开发依赖（13个）：

@next/eslint-plugin-next      
@react-types/shared           
eslint-config-prettier        
eslint-plugin-import          
eslint-plugin-jsx-a11y        
eslint-plugin-node            
eslint-plugin-prettier        
eslint-plugin-react           
eslint-plugin-react-hooks     
eslint-plugin-unused-imports  
install                       
sass-loader                   
tailwind-variants            

4. 未列出的依赖（3个）：

@tanstack/react-query-devtools  
@eslint/eslintrc                
@tailwindcss/forms              

清理过程

1. 删除未使用文件

rm config/fonts.ts config/site.ts types/index.ts
rm scripts/*.ts

2. 更新 package.json

• 移除未使用的依赖
• 移除未使用的开发依赖
• 添加缺失的依赖

3. 安装更新后的依赖

pnpm install

清理后的验证

再次运行 pnpm knip，发现一个遗留问题：

Unused devDependencies (1)
@next/eslint-plugin-next  package.json:37:4

最终优化

1. 更新 knip.json，在 ignoreDependencies 中添加 @next/eslint-plugin-next
2. 最后验证运行结果显示：

✂️  Excellent, Knip found no issues.

项目优化效果

1. 文件数量减少：删除 7 个未使用文件
2. 依赖数量优化：
   • 移除 14 个未使用的依赖
   • 移除 13 个未使用的开发依赖
   • 添加 3 个缺失的依赖
3. 项目结构更清晰
4. 依赖管理更规范

使用建议

1. 定期检查：建议每个迭代结束后运行 Knip 检查
2. CI/CD 集成：可以将 Knip 检查集成到 CI/CD 流程中
3. 配置维护：根据项目特点维护 ignoreDependencies 列表
4. 团队规范：将 Knip 使用方法加入团队开发规范

注意事项

1. 某些依赖虽然未直接使用，但可能是必要的（如 ESLint 插件）
2. 删除文件前需确认其确实无用
3. 某些工具依赖（如 typescript、eslint）即使显示未使用也应该保留
4. 配置文件中的 ignoreDependencies 要根据项目实际情况调整

通过使用 Knip，我们可以有效地保持项目的整洁和依赖的最小化，提高项目的可维护性和性能。建议在项目开发过程中定期使用 Knip 进行检查和清理。