| name | performance-bundle-analysis |
| description | null |
Bundle Analysis
Category: performance · Status: 🟢 Active
When to use
Khi initial load chậm, bundle phình to, hoặc cần tìm dependency nặng trước khi tối ưu.
Steps
- Build production và đo size thực tế (gzip/brotli), không đo dev build.
- Mở source-map explorer / bundle analyzer để xem thành phần chiếm dung lượng.
- Tìm dependency nặng (moment, lodash full, icon set) → thay bằng bản nhẹ hoặc import lẻ.
- Code-split theo route/feature, tách vendor; lazy phần ít dùng.
- Loại import thừa, tree-shake (ESM,
sideEffects: false).
- Đặt budget size và theo dõi trong CI.
Template
ANALYZE=true next build
npx vite-bundle-visualizer
npx source-map-explorer dist/*.js
Example
Good: import lodash/debounce, thay moment bằng date-fns, lazy chart lib.
Avoid: import _ from 'lodash', import cả icon library cho 2 icon.
Checklist