Code Splitting và Lazy Loading trong React

Trải nghiệm nhanh bắt đầu từ bundle nhỏ. Code splitting và lazy loading là hai kỹ thuật cốt lõi trong React giúp bạn chỉ gửi những gì người dùng cần, vào đúng lúc họ cần.

Vì sao kích thước bundle trở thành vấn đề#

Khi ứng dụng lớn dần, bundle JavaScript chính thường chứa cả những component mà người dùng có thể không bao giờ mở trong một phiên. Bundle lớn làm chậm lần render đầu tiên, nhất là trên thiết bị di động và mạng yếu.

Tách theo route trước tiên#

Cách dễ ăn điểm nhất là tách theo route. Với các framework như Next.js, việc này gần như tự động; còn với ứng dụng React tự dựng, bạn có thể làm bằng React.lazy và ranh giới route.

import { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Login = lazy(() => import("./Login"));
const Dashboard = lazy(() => import("./Dashboard"));

export default function App() {
  return (
    <Router>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

Lazy loading ở cấp component#

Với những component nặng nằm bên trong một trang, lazy loading vẫn rất hữu ích. Ví dụ: thư viện biểu đồ, trình soạn thảo rich text, bản đồ, hay bộ lọc nâng cao.

import { useState, lazy, Suspense } from "react";

const Modal = lazy(() => import("./Modal"));

export default function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>
      {showModal && (
        <Suspense fallback={<ModalSkeleton />}>
          <Modal onClose={() => setShowModal(false)} />
        </Suspense>
      )}
    </div>
  );
}

Prefetch cho hành động có khả năng xảy ra tiếp#

Lazy loading không chỉ là trì hoãn. Bạn có thể tải trước các chunk khi người dùng hover vào link hoặc khi trang đang rảnh.

// Webpack prefetch example
const Modal = lazy(() => import(/* webpackPrefetch: true */ "./Modal"));

Checklist thực tế#

Khi được áp dụng có chủ đích, code splitting và lazy loading có thể khiến ứng dụng React nhanh hơn rõ rệt mà không cần viết lại lớn.