Bundle analysis: cách phát hiện và giảm bundle size?

Bundle analysis là bước đầu tiên khi optimize bundle size — không đoán mò, phải đo.

• Tools: webpack-bundle-analyzer (treemap visualization), vite-bundle-visualizer (rollup-plugin-visualizer), source-map-explorer (analyze actual bundle không phải estimates), bundlephobia.com (check package size trước khi install).
• Những gì cần tìm: Large dependencies có alternatives nhỏ hơn — moment.js (330KB) → date-fns/dayjs (10KB); lodash (71KB full) → lodash-es + tree shaking hoặc chỉ import specific: import debounce from 'lodash/debounce'; chart.js (200KB) → recharts (160KB) → victory (100KB).
• Duplicate modules: cùng dependency nhiều versions (webpack deduplication), cùng code ở nhiều chunks.
• Unexpected large modules: ví dụ icon library import toàn bộ thay vì specific icons — @mui/icons-material 30MB vs import MenuIcon from '@mui/icons-material/Menu' (một file).
• Giải pháp: Tree shaking (sideEffects: false trong package.json), code splitting + dynamic imports, externals (load React từ CDN thay vì bundle), Module Federation (share dependencies giữa micro-frontends).
• Compression context: gzip/Brotli reduce bundle size 60-80% — báo cáo compressed size thực tế, không raw.
• Benchmark: track bundle size trong CI với size-limit package — fail build nếu bundle vượt threshold.