1. 14:04 13/10/2026
1. Lý do cần tối ưu bundle
Kích thước bundle lớn làm chậm thời gian tải trang web và tăng dung lượng ứng dụng mobile, ảnh hưởng trực tiếp đến trải nghiệm người dùng và chi phí băng thông. Trên web, người dùng thường rời bỏ nếu trang không hiển thị trong 3 giây. Trên mobile, dung lượng cài đặt quá lớn khiến tỷ lệ cài đặt giảm.
2. Phân tích thành phần bundle
- Sử dụng công cụ như webpack-bundle-analyzer (web) và react-native-bundle-visualizer (mobile) để xem biểu đồ treemap.
- Xác định các thư viện nặng (moment, lodash, charting) và các component ít khi dùng.
3. Kỹ thuật code splitting trên Web
- Dynamic import với React.lazy và Suspense cho từng route hoặc feature.
- Cấu hình splitChunks trong webpack để tách vendor chung và tạo chunk cho từng page.
- Preload/prefetch các chunk quan trọng qua link rel="preload".
4. Code splitting trên React Native
- Sử dụng Metro config với `maxWorkers` và `resetCache` để tách bundle theo entry point.
- Áp dụng `react-native-dynamic-import` (hoặc `import()`) cho các màn hình ít truy cập.
- Tận dụng Hermes bytecode caching để giảm thời gian khởi động.
5. Tree shaking và loại bỏ dead code
- Bật `sideEffects: false` trong package.json của thư viện nội bộ.
- Thay thế moment bằng date-fns hoặc dayjs (ESM) để chỉ import hàm cần thiết.
- Sử dụng lodash-es thay vì lodash toàn bộ.
6. Nén và tối ưu asset
- Bật gzip/brotli trên server web.
- Nén hình ảnh với WebP/AVIF, sử dụng `react-native-fast-image` để cache và resize tự động trên mobile.
7. Giám sát liên tục
- Thêm bước CI đo lường bundle size (webpack --json, metro --dump-graph).
- Đặt ngưỡng cảnh báo (ví dụ: web < 200 KB gzip, mobile < 30 MB).
- Tự động tạo PR comment khi vượt ngưỡng.
8. Checklist nhanh trước khi release
- [ ] Chạy analyzer và review treemap.
- [ ] Đảm bảo mọi route/web screen dùng lazy load.
- [ ] Kiểm tra Hermes bytecode trên Android/iOS.
- [ ] Verify nén gzip/brotli và WebP.
- [ ] CI báo cáo size không vượt ngưỡng.
Áp dụng các bước trên giúp giảm đáng kể dung lượng tải về, cải thiện tốc độ khởi động và giữ chân người dùng trên cả hai nền tảng.