Recipe
Bundle Analysis
Profile chunk sizes, tree-shaking gaps, and duplicate dependencies before they bloat your production build.
Quick start
npx @next/bundle-analyzerWraps your Next.js config and spawns three interactive treemap reports — client, server, and edge.
next.config.ts
import withBundleAnalyzer from "@next/bundle-analyzer";
const nextConfig = {
experimental: { optimizePackageImports: ["lucide-react"] },
};
export default withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" })(nextConfig);Interpreting the treemap
- Large rectangles = heavy modules. Hover to see exact parsed / gzipped sizes.
- Duplicate labels across chunks signal a missing `sharedDependencies` or barrel re-export.
- `node_modules` rectangles larger than 15 % of total usually mean you are importing server-side libs on the client.
Common fixes
Dynamic import
Lazy-load heavy widgets with `next/dynamic` and a loading skeleton.
optimizePackageImports
Tell Next to tree-shake icon libraries and date utils aggressively.
Dedupe with overrides
Pin transient deps in `pnpm.overrides` when two packages pull different versions.
Server Components
Keep data-fetching and heavy parsing inside RSCs — zero bytes shipped to the browser.
CI guard
Run the analyzer in CI and fail the build if any route exceeds your budget. Add a `budget.json` at the project root:
{
"client": { "maxTotalBytes": 180000 },
"server": { "maxTotalBytes": 320000 }
}