Careeroza

Bundle Analysis

Finding Big Dependencies

Example

npm install -D @next/bundle-analyzer
ANALYZE=true npm run build

Example output

> next build
Webpack Bundle Analyzer saved report to .next/analyze/client.html
Webpack Bundle Analyzer saved report to .next/analyze/nodejs.html

next.config.ts

next.config.ts

import type { NextConfig } from 'next';
import bundleAnalyzer from '@next/bundle-analyzer';

const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });

const nextConfig: NextConfig = {
  experimental: {
    optimizePackageImports: ['lucide-react', 'date-fns'], // import only the used icons/functions
  },
};

export default withBundleAnalyzer(nextConfig);

Tip: Next.js 16 also ships next experimental-analyze, an analyzer that works with Turbopack builds.

Usual Suspects

LibraryLighter option
moment (~300 KB)date-fns or Intl.DateTimeFormat
lodash (whole)Native methods or lodash-es single imports
Chart library on every pagenext/dynamic on the dashboard only
Markdown renderer in the clientRender markdown in a Server Component