How to Remove Unused JavaScript: Tree-Shaking, Coverage, and Lean Libraries

Bloated Library vs Leaner Alternative

How to Find Unused JavaScript

1. Open Chrome DevTools, press Cmd/Ctrl+Shift+P, type "Coverage," and select "Show Coverage."
2. Click the reload button inside the Coverage tab to start recording.
3. Interact with the page (open menus, submit forms, change routes) to exercise the code paths you actually use.
4. Sort by "Unused Bytes." Files with >50% unused are prime candidates for code-splitting or removal.
5. Run a Greadme deep scan and read the "Reduce unused JavaScript" audit; it lists exact URLs and savings.
6. Run `npx depcheck` to list unused npm packages and `npx knip` to list unused files and exports.
7. Cross-link: see how to fix console errors after a cleanup pass.

How to Remove Unused JavaScript: Code Examples

1. Tree-Shake by Switching to Per-Function Imports

// Bad: pulls all of lodash into the bundle
import _ from 'lodash';
const out = _.debounce(handler, 200);

// Good: only debounce ships
import { debounce } from 'lodash-es';
const out = debounce(handler, 200);

2. Code-Split a Route or Heavy Component

// Next.js dynamic import — chart.js only ships when /reports loads
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });

export default function Reports() {
  return <Chart />;
}

3. Replace moment with date-fns

// Bad: 70 KB
import moment from 'moment';
const label = moment(date).format('YYYY-MM-DD');

// Good: ~2 KB
import { format } from 'date-fns';
const label = format(date, 'yyyy-MM-dd');

4. Configure sideEffects for Tree-Shaking

// package.json
{
  "name": "my-app",
  "sideEffects": ["*.css", "*.scss"]
}

Common Mistakes (Bad vs Good)

// Bad: dynamic import that webpack cannot statically analyze
const lib = await import(libPath); // libPath is a runtime variable

// Good: literal path so the bundler can split it
const lib = await import('./features/heavy-thing');

// Bad: importing the CommonJS build of a library inside an ESM app
import _ from 'lodash'; // CJS, not tree-shakable

// Good: ESM build
import { debounce } from 'lodash-es';

How to Test That Unused JavaScript Is Gone

1. Re-run the Coverage tab on the same user flow. Unused bytes should drop substantially.
2. Re-run a Greadme deep scan. The `unused-javascript` audit should pass or report <20 KiB savings.
3. Run `npx webpack-bundle-analyzer dist/stats.json` (or `next build` + `@next/bundle-analyzer`) and confirm the removed library is gone.
4. Run `npx depcheck` and `npx knip` again; the lists should be empty (or only show intentional dev-only packages).
5. Track LCP and TTI in the field via CrUX or RUM after deploy; both should improve when bundle size drops.

FAQ

What is tree-shaking?

The bundler statically analyzes ES module imports and exports and drops anything not reachable from your entry. It needs ESM, a production build, and a correct `sideEffects` field.

Why does my lodash import not tree-shake?

You imported the CommonJS build (`lodash`) instead of the ESM build (`lodash-es`), or you used `import _ from 'lodash'` and called methods off the default export. Switch to named imports from `lodash-es`.

How do I find unused npm packages?

Run `npx depcheck`. It lists packages declared in `package.json` but never imported. Combine with `npx knip` for unused files, exports, and types.

What is the Coverage tab measuring?

Bytes downloaded versus bytes that the JavaScript engine has actually executed. Code can be parsed and still unused; the tab counts execution.

Should I replace moment.js if it works?

Yes if you ship to mobile users or care about LCP. Moment is ~70 KB gzipped and not tree-shakable. date-fns and dayjs cut that by 60+ KB with a one-day migration.

Does code-splitting hurt SEO?

No. Googlebot renders JavaScript and follows dynamic imports. Just make sure critical content is server-rendered or in the initial chunk.

Can I just delete a dependency I think is unused?

Run `depcheck` and `knip` first, then remove and run the full test suite plus a smoke test on a staging build. Some dependencies are loaded by string at runtime and static analysis misses them.

Does this affect AI search engines like ChatGPT and Perplexity?

Indirectly, yes. Heavy unused JavaScript inflates LCP and TBT — both feed Core Web Vitals, which Google uses as ranking signals. AI search engines (ChatGPT, Perplexity, Google AI Overviews) preferentially cite well-ranked, fast-loading pages, so trimming unused JS lifts your odds of being chosen as a citation. Slow JS bundles can also push content past AI crawler render budgets, leaving important content unindexed.