How do you analyze and diagnose large bundle sizes?

Tools:

• webpack-bundle-analyzer — generates an interactive treemap of all modules and their sizes. Run with ANALYZE=true next build.
• rollup-plugin-visualizer / vite-bundle-visualizer — equivalent for Vite/Rollup.
• source-map-explorer — analyzes the production source map to show the real size contribution of each module.
• Bundlephobia — check the size of npm packages before installing them.

Common culprits found during analysis:

• Moment.js locale files — ~70 kB of locale data bundled even if you only use English. Fix: use date-fns or configure IgnorePlugin to exclude locales.
• Full lodash — import _ from 'lodash' bundles everything. Fix: import debounce from 'lodash/debounce' or use lodash-es.
• Barrel file imports — import { X } from '@ui' may pull in the entire library. Fix: deep imports or sideEffects: false.
• Duplicate packages — two versions of the same package in node_modules due to peer dep conflicts.