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

Nguyên tắc: đo, không phỏng đoán — bundle analysis là bước đầu tiên khi giảm bundle size.

Tools:
- webpack-bundle-analyzer / vite-bundle-visualizer — treemap xem mỗi chunk gồm những gì; source-map-explorer phân tích bundle thật thay vì ước lượng.
- bundlephobia.com / pkg-size.dev — kiểm tra chi phí (minified + gzip, số dependency) của một package trước khi cài.

Những gì cần tìm:
- Dependency lớn có alternative nhẹ hơn — vd moment.js → date-fns/dayjs; lodash → import hàm cụ thể (import debounce from 'lodash/debounce'). So sánh bằng bundlephobia thay vì tin con số truyền miệng — kích thước thật phụ thuộc dependency kéo theo và mức tree-shake được.
- Icon/component library import cả gói — ưu tiên entry point per-icon tree-shakable (import MenuIcon from '@mui/icons-material/Menu') thay vì barrel import toàn bộ.
- Duplicate modules — cùng dependency ở nhiều version, cùng code nằm trong nhiều chunk.

Giải pháp: tree shaking (sideEffects: false trong package.json), code splitting + dynamic import, externals (load React từ CDN thay vì bundle), Module Federation cho micro-frontends.

Lưu ý: gzip/Brotli giảm 60–80% — báo cáo compressed size, không phải raw. Track bundle size trong CI với size-limit, fail build khi vượt threshold.