1. Phân tích bundle hiện tại - Sử dụng webpack-bundle-analyzer (web) hoặc react-native-bundle-visualizer (native) để xem kích thước từng module. - Xác định các thư viện lớn không cần thiết (ví dụ: moment.js, lodash toàn bộ) và thay thế bằng các bản nhẹ hoặc native API. 2. Áp dụng code splitting - Web: tận dụng React.lazy và Suspense cho các route ít truy cập (dashboard, settings). Cấu hình splitChunks trong webpack để tách vendor và common chunks. - Native: dùng dynamic import() kết hợp với react-navigation để tải màn hình theo yêu cầu. Metro hỗ trợ ram bundles cho Hermes, giúp giảm thời gian khởi động. 3. Tree shaking và sideEffects - Đảm bảo package.json của thư viện tự viết có "sideEffects": false hoặc liệt kê file có side effect. - Tránh import * as _ from 'lodash'; thay vào đó import { debounce } from 'lodash-es' để bundler loại bỏ phần không dùng. 4. Tối ưu hình ảnh và asset - Web: chuyển đổi sang WebP/AVIF, dùng next/image hoặc vite-plugin-imagemin. - Native: nén ảnh với tinypng, sử dụng react-native-fast-image để cache và tải dần. 5. Cấu hình production build - Bật minify (terser cho web, hermes bytecode cho native). - Loại bỏ console.log, prop-types, development warnings qua babel-plugin-transform-react-remove-prop-types và define NODE_ENV=production. 6. Đo lường và giám sát liên tục - Thêm script CI chạy bundle-analyzer và so sánh kích thước với baseline. - Theo dõi First Contentful Paint (web) và TTI (native) qua Lighthouse / Flipper. Mẹo thực chiến: bắt đầu từ route lớn nhất, tách nhỏ từng feature, chạy test hồi quy sau mỗi lần split. Kết hợp với feature flag để bật/tắt code splitting trên môi trường staging trước khi đẩy production.