ReactJS: Code-Splitting - Tăng Cường Hiệu Suất Ứng Dụng Của Bạn

React Code-Splitting: Bundle Nhỏ, Ứng Dụng Nhanh Hơn

Thật sự mà nói, không ai thích phải chờ đợi khi một trang web đang tải. Trong thế giới nhanh chóng của internet, mỗi mili giây đều quan trọng. Các bundle JavaScript lớn là thủ phạm chính khiến thời gian tải ban đầu trở nên chậm chạp. Tính năng code-splitting của React chính là cứu cánh, cho phép bạn chia ứng dụng thành các phần nhỏ hơn, dễ quản lý hơn và chỉ tải khi cần thiết. Điều này có nghĩa là người dùng chỉ tải mã khi họ thực sự cần nó. Bài viết này sẽ hướng dẫn bạn cách triển khai code-splitting trong ứng dụng React sử dụng React.lazy, Suspense, và các import động.

Tại Sao Code-Splitting Quan Trọng: Hiệu Suất Là Chìa Khóa!

Code-splitting mang lại nhiều lợi ích quan trọng:

Cải Thiện Thời Gian Tải Ban Đầu: Bằng cách chỉ tải mã cần thiết ngay từ đầu, bạn giảm thiểu đáng kể kích thước tải ban đầu, giúp ứng dụng tải nhanh hơn và cải thiện trải nghiệm người dùng.
Giảm Kích Thước Bundle: Bundle nhỏ hơn có nghĩa là tải xuống nhanh hơn và tiết kiệm băng thông hơn, đặc biệt quan trọng đối với người dùng trên thiết bị di động hoặc kết nối internet chậm.
Cải Thiện Hiệu Suất Cảm Nhận: Mặc dù kích thước tổng của mã tải xuống có thể không thay đổi, nhưng code-splitting có thể cải thiện hiệu suất cảm nhận bằng cách tải nội dung theo từng phần, giúp ứng dụng cảm giác phản hồi nhanh hơn.
Caching Tốt Hơn: Bundle nhỏ hơn, chi tiết hơn dễ dàng được cache hiệu quả hơn. Những thay đổi trong một phần của ứng dụng sẽ không làm vô hiệu hóa bộ nhớ cache của các phần không liên quan.

`React.lazy` và `Suspense`: Cặp Đôi Huyền Thoại Của Code-Splitting

React cung cấp hai thành phần chính để thực hiện code-splitting:

React.lazy: Hàm này cho phép bạn render một import động như một component bình thường. Import động này trả về một Promise, khi hoàn thành sẽ trả về một module có export mặc định chứa component React.
Suspense: Thành phần này cho phép bạn chỉ định một chỉ báo tải trong khi component được import động đang tải.

Dưới đây là cách chúng phối hợp với nhau:

import React, { Suspense } from "react";
// Import động component About
const About = React.lazy(() => import("./About"));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <About />
      </Suspense>
    </div>
  );
}

Trong ví dụ này, component About chỉ được tải khi MyComponent render. Trong khi About đang tải, component Suspense sẽ hiển thị giao diện fallback “Loading…”.

Dynamic `import()`: Tải Mã Theo Yêu Cầu

Cú pháp dynamic import() là trái tim của code-splitting. Nó cho phép bạn import một module bất đồng bộ.

import("./About")
  .then((module) => {
    const About = module.default;
    // Sử dụng component About
  })
  .catch((error) => {
    // Xử lý lỗi
  });

Hàm import() trả về một promise, khi hoàn thành sẽ trả về module đã được import. Bạn có thể sử dụng .then để xử lý module đã tải và .catch để xử lý lỗi.

Route-Based Code-Splitting: Một Ứng Dụng Phổ Biến

Một trong những trường hợp sử dụng phổ biến nhất của code-splitting là chia nhỏ theo route, nơi các component của các route khác nhau chỉ được tải khi người dùng điều hướng đến các route đó. Điều này thường được thực hiện với các thư viện như react-router-dom.

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

const Home = lazy(() => import("./routes/Home"));
const About = lazy(() => import("./routes/About"));
const Dashboard = lazy(() => import("./routes/Dashboard"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Trong ví dụ này, các component Home, About, và Dashboard chỉ được tải khi người dùng điều hướng đến các route tương ứng, giúp cải thiện đáng kể thời gian tải ban đầu.

Named Exports: Xử Lý Nhiều Component

Nếu bạn cần import nhiều component từ một file, bạn có thể sử dụng named exports. Tuy nhiên, React.lazy chỉ hỗ trợ export mặc định trực tiếp. Bạn có thể xử lý các named exports bằng cách tạo một wrapper quanh import động.

Ví Dụ: Lazy Loading Các Named Exports

Giả sử bạn có một file MyComponents.tsx với các named exports:

// MyComponents.tsx
export const MyComponent1 = () => <div>Component 1</div>;
export const MyComponent2 = () => <div>Component 2</div>;

Bạn có thể tạo một wrapper component để xử lý việc này:

// MyComponentsLazy.tsx
import React from "react";

export const MyComponent1Lazy = React.lazy(() =>
  import("./MyComponents").then((module) => ({ default: module.MyComponent1 }))
);
export const MyComponent2Lazy = React.lazy(() =>
  import("./MyComponents").then((module) => ({ default: module.MyComponent2 }))
);

Sau đó, bạn có thể sử dụng các component lazy-loaded này trong ứng dụng của mình:

import React, { Suspense } from "react";
import { MyComponent1Lazy, MyComponent2Lazy } from "./MyComponentsLazy";

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent1Lazy />
        <MyComponent2Lazy />
      </Suspense>
    </div>
  );
}

export default App;

Ngừng Tải Không Cần Thiết Với `React.memo`

Đối với các component nhỏ, việc import có thể tốn nhiều tài nguyên hơn là chỉ bao gồm chúng trong bundle chính. Hãy sử dụng React.memo để ngừng việc re-render không cần thiết, giúp loại bỏ nhu cầu code-splitting trong những trường hợp này.

Ví Dụ: Sử Dụng `React.memo`

import React, { memo } from "react";

const SmallComponent = () => {
  return <div>Small Component</div>;
};

export default memo(SmallComponent);

Những Điều Cần Lưu Ý và Cân Nhắc

Error Boundaries: Kết hợp code-splitting với Error Boundaries để xử lý lỗi một cách mềm mại trong quá trình tải.
Phân Tích Bundle: Sử dụng các công cụ như Webpack Bundle Analyzer để hình dung các bundle của bạn và xác định cơ hội tối ưu hóa thêm.
Trải Nghiệm Người Dùng: Cung cấp các chỉ báo tải rõ ràng để thông báo cho người dùng rằng nội dung đang được tải.

Triển Khai Error Boundaries Với Code-Splitting

Bạn có thể sử dụng Error Boundaries cùng với Suspense để xử lý lỗi trong quá trình tải một cách mượt mà. Dưới đây là một ví dụ sử dụng thư viện react-error-boundary:

import React, { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import MyComponent from "./MyComponent";

function FallbackComponent({
  error,
  resetErrorBoundary,
}: {
  error: Error;
  resetErrorBoundary: () => void;
}) {
  return (
    <div>
      <h1>Something went wrong!</h1>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={FallbackComponent} onReset={() => {}}>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

Kết Luận: Code-Splitting Cho Một Trải Nghiệm Người Dùng Tốt Hơn

Code-splitting là một kỹ thuật mạnh mẽ để tối ưu hóa hiệu suất ứng dụng React. B

ằng cách chia ứng dụng thành các bundle nhỏ hơn và tải chúng khi cần, bạn có thể cải thiện thời gian tải ban đầu, giảm tiêu thụ băng thông và tạo ra một trải nghiệm người dùng mượt mà hơn. Với React.lazy, Suspense và import động, việc triển khai code-splitting trở nên dễ dàng và hiệu quả. Hãy bắt tay vào phân chia mã của bạn để có một web tốt hơn!