removed 3 vite plugins, my build dropped 4 seconds. heres which

#vite #react #performance #webdev

audited my react starter last week and found 8 vite plugins. three of them were doing more harm than good. removed all three. dev server start went from 6.3s to 2.4s. production build from 18s to 14s.

vite-plugin-pwa

added by npm create vite@latest in some templates i copy-pasted. stayed because nobody questioned it. i wasnt shipping a PWA — never. every build generated service worker + manifest artifacts i never deployed.

cost: ~1.2s added to prod build. also fragmented CSS chunks because the precaching list was rebuilt on every change.

removed it. nothing replaces it. if i need a PWA later, ill add it back for that project specifically.

vite-plugin-eslint

this was the easy cut. runs ESLint on every change during dev. on a 200-file project, each save triggers ~800ms of ESLint processing. the overlay also masked real vite errors when both fired together — twice in one week, i spent 20 minutes hunting an HMR issue that was hidden behind a stale ESLint overlay.

cost: ~2.1s added to dev start, plus the cumulative drag.

ESLint now runs in pnpm lint (separate command), in CI on every PR, and in a pre-commit hook on staged files only. dev server doesnt know ESLint exists. ive lost zero linting coverage.

unplugin-auto-import

controversial one. this plugin auto-imports useState, useEffect, ref, etc. without import statements. saves typing. felt like a quality-of-life win.

removed it because every imported symbol becomes a magic string. when a new contributor opened a component file, they couldnt grep the file or use IDE Go-to-Definition reliably — the plugin generated a .d.ts with global declarations that the IDE handled inconsistently.

cost: only ~0.4s on dev startup. but the readability tax was real.

explicit imports now. the first 3-5 lines of every file are imports. file gets longer. but anyone — including future-me at 2am — can know exactly where every symbol comes from.