The exact process I used across three enterprise Next.js apps to systematically reduce bundle size, improve Core Web Vitals, and make users noticeably happier.
Performance work is 20% tools and 80% discipline. Here's the audit checklist that got us from 3.2MB to 1.85MB across our enterprise suite.
Step 1: Baseline with webpack-bundle-analyzer. Don't guess — measure. Every performance project should start with a clear picture of the current state. Screenshot it. Save the numbers.
Step 2: Hunt for duplicate dependencies. lodash is almost always the culprit — it gets pulled in by multiple packages at different versions. Use dedupe and check if you can replace the full library with targeted imports (lodash-es tree-shakes; lodash doesn't).
Step 3: Audit lazy loading opportunities. Route-based code splitting is table stakes in Next.js, but component-level splitting is often left on the table. Heavy components like charts, rich text editors, and map libraries are perfect candidates for dynamic import with a lightweight skeleton fallback.
Step 4: Replace heavy libraries with lighter alternatives. moment.js → date-fns (94% smaller). axios → native fetch. lodash → native array methods. Each swap requires tests, but the gains compound.
Step 5: Audit your images. This is where most teams leave the biggest gains. Unoptimised images are often 3-5× larger than they need to be. Use Next.js Image for automatic WebP conversion and lazy loading, or run your assets through Squoosh as a one-time optimisation.
Step 6: Re-measure, document, repeat. Performance is not a one-time project. Schedule a quarterly audit. The bundle always wants to grow.