refactor-cleaner

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Refactor Cleaner (重構清理)

Refactor Cleaner

When to Use

在以下情況使用此 Skill：

定期程式碼健康檢查
專案清理與整合
移除已廢棄功能
減少套件大小
整合重複程式碼

Use this Skill in the following scenarios:

Regular code health checks
Project cleanup and consolidation
Removing deprecated features
Reducing package size
Consolidating duplicate code

When NOT to Use

正在開發新功能時
生產部署前夕
程式碼庫不穩定時
測試覆蓋率不足時

When developing new features
On the eve of production deployment
When the codebase is unstable
When test coverage is insufficient

核心職責

Core Responsibilities

死代碼檢測 - 找出未使用的程式碼、exports、依賴
重複消除 - 識別並整合重複程式碼
依賴清理 - 移除未使用的套件和 imports
安全重構 - 確保變更不破壞功能
文件記錄 - 在 DELETION_LOG.md 追蹤所有刪除

Dead Code Detection - Identify unused code, exports, and dependencies
Duplicate Elimination - Identify and consolidate duplicate code
Dependency Cleanup - Remove unused packages and imports
Safe Refactoring - Ensure changes do not break functionality
Documentation - Track all deletions in DELETION_LOG.md

檢測工具

Detection Tools

bash

undefined

bash

undefined

knip - 找出未使用的檔案、exports、依賴

knip - Find unused files, exports, dependencies

npx knip

depcheck - 識別未使用的 npm 依賴

depcheck - Identify unused npm dependencies

npx depcheck

ts-prune - 找出未使用的 TypeScript exports

ts-prune - Find unused TypeScript exports

npx ts-prune

eslint - 檢查未使用的變數

eslint - Check for unused variables

npx eslint . --report-unused-disable-directives

undefined

npx eslint . --report-unused-disable-directives

undefined

重構流程

Refactoring Process

1. 分析階段

1. Analysis Phase

a) 平行執行檢測工具
b) 收集所有發現
c) 依風險分類:
   - 安全: 未使用的 exports、依賴
   - 小心: 可能透過動態 import 使用
   - 風險: 公開 API、共用工具

a) Run detection tools in parallel
b) Collect all findings
c) Classify by risk:
   - Safe: Unused exports, dependencies
   - Caution: May be used via dynamic imports
   - High Risk: Public APIs, shared utilities

2. 風險評估

2. Risk Assessment

對每個要移除的項目：

搜尋所有引用 (grep)
確認無動態 imports
檢查是否為公開 API
審視 git 歷史了解原因
測試對建構/測試的影響

For each item to be removed:

Search all references (grep)
Confirm no dynamic imports
Check if it's a public API
Review git history to understand context
Test impact on build/tests

3. 安全移除流程

3. Safe Removal Process

a) 只從「安全」項目開始
b) 一次移除一個類別:
   1. 未使用的 npm 依賴
   2. 未使用的內部 exports
   3. 未使用的檔案
   4. 重複程式碼
c) 每批次後執行測試
d) 每批次建立 git commit

a) Start with only "Safe" items
b) Remove one category at a time:
   1. Unused npm dependencies
   2. Unused internal exports
   3. Unused files
   4. Duplicate code
c) Run tests after each batch
d) Create a git commit for each batch

4. 重複整合

4. Duplicate Consolidation

a) 找出重複的元件/工具
b) 選擇最佳實作:
   - 功能最完整
   - 測試最完善
   - 最近使用的
c) 更新所有 imports 使用選定版本
d) 刪除重複
e) 驗證測試仍通過

a) Identify duplicate components/utilities
b) Select the best implementation:
   - Most feature-complete
   - Best tested
   - Most recently used
c) Update all imports to use the selected version
d) Delete duplicates
e) Verify tests still pass

刪除日誌格式

Deletion Log Format

建立/更新

docs/DELETION_LOG.md

：

markdown

undefined

Create/update

docs/DELETION_LOG.md

markdown

undefined

程式碼刪除日誌

Code Deletion Log

[YYYY-MM-DD] 重構作業

[YYYY-MM-DD] Refactoring Operation

移除的依賴

Removed Dependencies

package-name@version - 最後使用: 從未, 大小: XX KB
another-package@version - 已被取代: better-package

package-name@version - Last used: Never, Size: XX KB
another-package@version - Replaced by: better-package

刪除的檔案

Deleted Files

src/old-component.tsx - 取代為: src/new-component.tsx
lib/deprecated-util.ts - 功能移至: lib/utils.ts

src/old-component.tsx - Replaced with: src/new-component.tsx
lib/deprecated-util.ts - Functionality moved to: lib/utils.ts

整合的重複程式碼

Consolidated Duplicate Code

src/components/Button1.tsx + Button2.tsx -> Button.tsx
原因: 兩個實作完全相同

src/components/Button1.tsx + Button2.tsx -> Button.tsx
Reason: Identical implementations

移除的 Exports

Removed Exports

src/utils/helpers.ts - 函數: foo(), bar()
原因: 程式碼庫中無引用

src/utils/helpers.ts - Functions: foo(), bar()
Reason: No references in codebase

影響

Impact

刪除檔案: 15
移除依賴: 5
移除程式碼行數: 2,300
套件大小減少: ~45 KB

Files deleted: 15
Dependencies removed: 5
Lines of code removed: 2,300
Package size reduced: ~45 KB

測試

Testing

所有單元測試通過
所有整合測試通過
手動測試完成

undefined

All unit tests passed
All integration tests passed
Manual testing completed

undefined

安全檢查清單

Safety Checklist

常見移除模式

Common Removal Patterns

1. 未使用的 Imports

1. Unused Imports

typescript

// 移除未使用的 imports
import { useState, useEffect, useMemo } from 'react' // 只用到 useState

// 只保留使用的
import { useState } from 'react'

typescript

// Remove unused imports
import { useState, useEffect, useMemo } from 'react' // Only useState is used

// Keep only used imports
import { useState } from 'react'

2. 死代碼分支

2. Dead Code Branches

typescript

// 移除不可達程式碼
if (false) {
  // 永遠不會執行
  doSomething()
}

// 移除未使用的函數
export function unusedHelper() {
  // 程式碼庫中無引用
}

typescript

// Remove unreachable code
if (false) {
  // Will never execute
  doSomething()
}

// Remove unused functions
export function unusedHelper() {
  // No references in codebase
}

3. 重複元件

3. Duplicate Components

typescript

// 多個相似元件
components/Button.tsx
components/PrimaryButton.tsx
components/NewButton.tsx

// 整合為一個
components/Button.tsx (使用 variant prop)

typescript

// Multiple similar components
components/Button.tsx
components/PrimaryButton.tsx
components/NewButton.tsx

// Consolidate into one
components/Button.tsx (using variant prop)

4. 未使用的依賴

4. Unused Dependencies

json

// 已安裝但未 import 的套件
{
  "dependencies": {
    "lodash": "^4.17.21",  // 無處使用
    "moment": "^2.29.4"    // 已被 date-fns 取代
  }
}

json

// Installed but never imported packages
{
  "dependencies": {
    "lodash": "^4.17.21",  // Never used
    "moment": "^2.29.4"    // Replaced by date-fns
  }
}

緊急恢復

Emergency Rollback

如果移除後出錯：

bash

undefined

If errors occur after removal:

bash

undefined

1. 立即回滾

1. Roll back immediately

git revert HEAD npm install npm run build npm test

2. 調查原因

2. Investigate the cause

- 什麼失敗了?

- What failed?

- 是動態 import?

- Was it a dynamic import?

- 檢測工具遺漏了什麼?

- Did the detection tool miss something?

3. 修正向前

3. Fix forward

- 標記為「禁止移除」

- Mark as "Do Not Remove"

- 記錄為何檢測工具遺漏

- Document why detection tool missed it

- 加上明確類型註解

- Add explicit type annotations

undefined

undefined

最佳實踐

Best Practices

從小處著手 - 一次移除一個類別
頻繁測試 - 每批次後執行測試
完整記錄 - 更新 DELETION_LOG.md
保守行事 - 有疑慮就不移除
Git Commits - 每個邏輯移除批次一個 commit
分支保護 - 總是在 feature branch 工作
同儕審查 - 合併前讓刪除被審查
監控生產 - 部署後觀察錯誤

Start Small - Remove one category at a time
Test Frequently - Run tests after each batch
Document Thoroughly - Update DELETION_LOG.md
Be Conservative - If in doubt, don't remove it
Git Commits - One commit per logical removal batch
Branch Protection - Always work in a feature branch
Peer Review - Have deletions reviewed before merging
Monitor Production - Watch for errors after deployment

Pull Request 範本

Pull Request Template

markdown

undefined

markdown

undefined

重構: 程式碼清理

Refactoring: Code Cleanup

摘要

Summary

死代碼清理，移除未使用的 exports、依賴和重複。

Dead code cleanup, removing unused exports, dependencies, and duplicates.

變更

Changes

移除 X 個未使用的檔案
移除 Y 個未使用的依賴
整合 Z 個重複元件
詳見 docs/DELETION_LOG.md

Removed X unused files
Removed Y unused dependencies
Consolidated Z duplicate components
See docs/DELETION_LOG.md for details

測試

Testing

影響

Impact

套件大小: -XX KB
程式碼行數: -XXXX
依賴: -X 套件

Package size: -XX KB
Lines of code: -XXXX
Dependencies: -X packages

風險等級

Risk Level

低 - 僅移除可驗證的未使用程式碼

詳見 DELETION_LOG.md。

undefined

Low - Only verified unused code was removed

See DELETION_LOG.md for details.

undefined

成功標準

Success Criteria

清理作業後：

所有測試通過
建構成功
無 console 錯誤
DELETION_LOG.md 已更新
套件大小已減少
生產環境無回歸

After cleanup:

All tests pass
Build succeeds
No console errors
DELETION_LOG.md is updated
Package size is reduced
No regressions in production