Bundle size analysis and reduction strategies

Web application initial load is slow. JavaScript bundle is too large (>250KB gzipped). Users on slow connections experience long wait times before the app becomes interactive.

(1) Analyze: use webpack-bundle-analyzer, source-map-explorer, or vite-plugin-visualizer to see what's in your bundle. (2) Code split by route — dynamic import() for each page. (3) Replace heavy libraries: moment.js (330KB) with date-fns or dayjs (7KB), lodash with lodash-es and tree-shake. (4) Lazy load below-fold components. (5) Use sideEffects: false in package.json for proper tree-shaking. (6) Import only what you need: import { debounce } from 'lodash-es' not import _ from 'lodash'. (7) Check for duplicate dependencies: npm ls <package>. (8) Use compression: gzip or brotli.

Every KB of JavaScript must be downloaded, parsed, compiled, and executed. JavaScript is the most expensive resource byte-for-byte because it blocks the main thread during parsing and execution.