bundle-analyzer

name

bundle-analyzer

description

Next.js bundle analysis skill for identifying large modules and providing optimization suggestions. Use after implementing a feature to run `pnpm next experimental-analyze --output` and analyze the results. Triggers when the user asks to analyze bundles, check bundle sizes, run bundle analysis, or review the output of `next experimental-analyze`. Detects modules exceeding a size threshold and generates actionable improvement suggestions.

Next.js Bundle Analyzer

Workflow

1. Run the analyzer command:

   pnpm next experimental-analyze --output
   

   Output is written to .next/diagnostics/analyze/data/.

2. Run the analysis script from the project root:

   python3 <skill-dir>/scripts/analyze_bundle.py
   

   Options:

   • --threshold KB — report modules larger than KB (default: 100)
   • --top N — show top N results (default: 20)
   • --dir PATH — path to analyze/data/ (auto-detected by default)

3. Read the script output and present findings to the user:

   • Total bundle size and compressed size
   • List of large modules with full paths and sizes
   • Per-module improvement suggestions
   • Summary grouped by npm package

4. Based on the findings, provide specific code-level recommendations:

   • Which components to convert to Server Components
   • Which imports to change (e.g., named imports, lighter alternatives)
   • Which next.config options to add (optimizePackageImports, serverExternalPackages)
   • Which imports to wrap with next/dynamic

Data format

The analyze.data file has a 4-byte binary header followed by JSON with these keys:

• sources — array of {parent_source_index, path} forming a tree
• chunk_parts — array of {source_index, output_file_index, size, compressed_size}
• output_files — array of {filename}

Size is in bytes. Walk up parent_source_index chains and concatenate paths (each path segment already ends with / for directories) to reconstruct full paths.

Common findings and fixes

Pattern	Fix
Icon library (lucide, heroicons, @mui/icons)	Add to optimizePackageImports in next.config
moment.js	Replace with date-fns or dayjs
lodash	Use named imports or lodash-es
Chart/viz library (recharts, d3, chart.js)	next/dynamic with ssr: false
Syntax highlighter (prism, shiki)	Move to Server Component
Markdown parser	Move to Server Component
Large polyfill	Review browserslist targets
Any heavy library on client	Consider Server Component or next/dynamic

next.config optimization options

const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library', 'util-library'],
  },
  serverExternalPackages: ['heavy-server-only-pkg'],
};