Find Duplicate Packages Inflating Your Frontend Bundle

1. List duplicated packages across the dependency graph.

pnpm why lodash date-fns 2>/dev/null | head -20 || npm ls lodash date-fns 2>/dev/null | head -20

Expected output: Multiple version paths print, for example [email protected] and a nested [email protected] pulled by an old utility library.

2. See how much each duplicate costs in the shipped bundle.

npx vite build --mode analyze 2>/dev/null; node -e "const r=require('./bundle-report.json');r.children&&r.children.filter(c=>/lodash|date-fns/.test(c.label)).forEach(c=>console.log(c.label,(c.gzipSize/1024).toFixed(1)+'KB gzip'))" 2>/dev/null || echo "use rollup-plugin-visualizer: npx vite build && open stats.html"

Expected output: The analyzer report shows each copy with its gzip size, turning an abstract duplication into shipped bytes.

3. Trace which import statement pulls the second copy.

grep -rn "from .lodash." src/ | head -5; pnpm why lodash | grep -B2 -A2 "lodash@3" | head -10

Expected output: The importer chain prints: an old table component importing lodash.debounce resolves to the nested v3 copy while everything else uses v4.

4. Collapse the duplicates at the resolution layer.

// package.json (pnpm)
{
  "pnpm": {
    "overrides": {
      "lodash": "^4.17.21",
      "old-table-component>lodash": "^4.17.21"
    }
  }
}

// vite/webpack alias alternative
import { defineConfig } from 'vite';
export default defineConfig({
  resolve: {
    alias: { lodash: 'lodash-es' },
    dedupe: ['lodash-es', 'date-fns'],
  },
});

Expected output: After reinstall and rebuild, the analyzer shows a single lodash entry, and the bundle shrinks by the size of the removed copy.

5. Add a CI budget check so duplicates cannot return silently.

// scripts/check-duplicates.mjs
import { execSync } from 'node:child_process';
const out = execSync('npm ls --json --all 2>/dev/null || true').toString();
const tree = JSON.parse(out || '{}');
const seen = new Map();
(function walk(node) {
  for (const [name, info] of Object.entries(node.dependencies ?? {})) {
    if (info.version) {
      const key = `${name}@${info.version}`;
      if (seen.has(name) && seen.get(name) !== info.version) {
        console.error(`duplicate: ${name} ${seen.get(name)} vs ${info.version}`);
        process.exitCode = 1;
      }
      seen.set(name, info.version);
    }
    walk(info);
  }
})(tree);

Expected output: CI fails with a named duplicate the moment any dependency change reintroduces a second version, keeping the bundle single-copy by construction.

Problem

Override breaks the old consumer

Solution

The nested version was pinned for an API difference; upgrade the consumer instead, or scope the override narrowly and test the old component explicitly before merging.

Problem

Duplicates exist only in the built bundle, not npm ls

Solution

Mixed module formats cause double inclusion (lodash plus lodash-es); alias one to the other or add both to the bundler dedupe list.

Problem

Cannot remove the duplicate without a major upgrade

Solution

Quantify the cost in KB first; a 12KB duplicate is a ticket, not an emergency, and the CI check keeps it from compounding while the upgrade is scheduled.