React là một thư viện mạnh mẽ cho việc xây dựng giao diện người dùng. Tuy nhiên, nếu không tối ưu đúng cách, ứng dụng React có thể trở nên chậm chạp, đặc biệt khi ứng dụng lớn dần lên. Dưới đây là những cách hiệu quả giúp bạn tối ưu tốc độ tải trang trong ứng dụng React.
1. Code Splitting (Tách mã theo nhu cầu)
Vấn đề: React bundle mặc định có thể rất lớn, khiến người dùng phải tải toàn bộ app dù chỉ cần xem 1 trang.
Giải pháp: Dùng React.lazy và Suspense để chỉ tải component khi cần.
import React, { Suspense } from 'react'; const Dashboard = React.lazy(() => import('./Dashboard')); function App() { return ( <Suspense fallback={<div>Đang tải...</div>}> <Dashboard /> </Suspense> );
}
2. Lazy load hình ảnh và component phụ
Vấn đề: Hình ảnh hoặc component nặng không cần thiết hiển thị ngay vẫn được tải.
Giải pháp: Dùng react-intersection-observer hoặc next/image để lazy load.
import { useInView } from 'react-intersection-observer'; const LazyImage = ({ src, alt }) => { const { ref, inView } = useInView({ triggerOnce: true }); return ( <div ref={ref}> {inView ? <img src={src} alt={alt} /> : <div>Đang tải ảnh...</div>} </div> );
};
3. Tối ưu bundle bằng Tree Shaking
Vấn đề: Bundle chứa cả phần code không dùng đến.
Giải pháp:
- Tránh import toàn bộ thư viện (VD:
import _ from 'lodash') → dùnglodash-eshoặc import hàm cần thiết. - Dùng Webpack/Vite có hỗ trợ tree shaking.
4. Memo hóa Component và Hàm
Vấn đề: Component render lại không cần thiết khi props không thay đổi.
Giải pháp: Dùng React.memo, useMemo, useCallback đúng cách.
const ExpensiveComponent = React.memo(({ data }) => { // chỉ render lại khi `data` thay đổi
});
5. Tối ưu việc gọi API & xử lý dữ liệu
- Dùng pagination hoặc infinite scroll thay vì tải toàn bộ dữ liệu.
- Cache dữ liệu với React Query, SWR.
- Tránh xử lý dữ liệu nặng trong render, dùng
useMemo.
6. Phân tích và theo dõi hiệu năng
- Dùng công cụ:
- Lighthouse (Chrome DevTools)
- React DevTools Profiler
- Web Vitals (FCP, LCP, CLS...)
7. Dùng SSR hoặc SSG (nếu có thể)
Với Next.js: SSR (Server Side Rendering) hoặc SSG (Static Site Generation) giúp tối ưu tốc độ và SEO tốt hơn.
🔚Kết luận
Tối ưu việc load trang trong React là sự kết hợp giữa:
- Tối ưu bundle
- Giảm tải tài nguyên không cần thiết
- Giảm render thừa
- Tải tài nguyên đúng lúc, đúng nơi
Hãy bắt đầu từ những cách đơn giản như React.lazy, React.memo, sau đó nâng cấp lên SSR hoặc theo dõi hiệu năng với tool chuyên dụng.