Buy NowGet Update

Clean project

Improve your codebase by removing unused code to optimize performance and reduce project size.

Each project has different needs, so some components or pages might no longer be necessary.

This guide walks you through a simple and safe process to clean up your project.

🔍 Step 1: remove unused pages

Delete unused pages in /pages or /app.

Example: src/pages/contact-us.tsx

🛠️ Step 2: Create knip.jsonc file

Set up knip configuration to scan your project.

knip.jsonc
{
"$schema": "https://unpkg.com/knip@5/schema-jsonc.json",
"paths": {
"src/*": ["./src/*"],
},
"project": ["src/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
"ignoreExportsUsedInFile": true,
"ignoreDependencies": [
// ignore dependencies
"@fontsource.+",
],
"ignore": [
// ignore folders or files
"src/_mock/**",
],
}
🧼 Step 3: Identify and delete unused files

Use knip to detect and remove unused files, dependencies, and more.

Run Knip
npx knip

Sample Output
Unused dependencies (10)
@emotion/styled               package.json
@fullcalendar/core            package.json
@tiptap/core                  package.json
@tiptap/extension-code-block  package.json
@tiptap/pm                    package.json
apexcharts                    package.json
embla-carousel                package.json
mapbox-gl                     package.json
react-dom                     package.json
stylis                        package.json
 
Unused devDependencies (1)
eslint  package.json
 
Unlisted binaries (3)
eslint    package.json
next      package.json
prettier  package.json
 
Configuration hints (3)

This is a helper tool — use judgment when removing files!

🔗 Reference: