Bundle Size Analysis

Format: Analyze your JavaScript bundle size.

Rules of thumb:

• First-screen JS < 200KB (compressed)
• Total JS < 500KB (compressed)

Steps:

# Next.js project
npx next build
# Check the .next/analyze report

# General tool
npx bundle-analyzer

Common causes of large bundles:

• Importing an entire library but only using one function (import _ from 'lodash' vs import debounce from 'lodash/debounce')
• No code splitting (all pages' code in a single file)
• Including dependencies only needed during development