M

MLOG

Tiếng Việt

Mở khóa thời gian tải ban đầu nhanh hơn và cải thiện hiệu suất cho ứng dụng React của bạn với lazy loading và tách code component. Tìm hiểu các kỹ thuật thực tế và phương pháp hay nhất.

React Lazy Loading: Tách Code Component để Tối Ưu Hóa Hiệu Suất

Trong thế giới kỹ thuật số có nhịp độ nhanh ngày nay, hiệu suất trang web là yếu tố tối quan trọng. Người dùng mong đợi sự hài lòng tức thì và thời gian tải chậm có thể dẫn đến sự thất vọng, bỏ giỏ hàng và hình ảnh thương hiệu tiêu cực. Đối với các ứng dụng React, tối ưu hóa hiệu suất là rất quan trọng để mang lại trải nghiệm người dùng mượt mà và hấp dẫn. Một kỹ thuật mạnh mẽ để đạt được điều này là lazy loading (tải lười) với việc tách code component.

Lazy Loading và Code Splitting là gì?

Lazy loading là một kỹ thuật trong đó các tài nguyên, chẳng hạn như hình ảnh, tập lệnh và component, chỉ được tải khi chúng cần thiết, thay vì tải tất cả cùng một lúc trong lần tải trang ban đầu. Điều này làm giảm đáng kể lượng dữ liệu cần được tải xuống và phân tích cú pháp ngay từ đầu, dẫn đến thời gian tải ban đầu nhanh hơn và cải thiện hiệu suất cảm nhận được.

Code splitting (tách code) là quá trình chia mã của ứng dụng thành các phần nhỏ hơn, dễ quản lý hơn (gọi là bundle). Điều này cho phép trình duyệt chỉ tải xuống mã cần thiết cho lần hiển thị ban đầu, trì hoãn việc tải các mã khác cho đến khi chúng thực sự được yêu cầu. Lazy loading tận dụng việc tách code để tải các component cụ thể chỉ khi chúng sắp được hiển thị.

Tại sao nên sử dụng Lazy Loading và Code Splitting trong React?

Đây là lý do tại sao bạn nên xem xét việc kết hợp lazy loading và tách code vào các dự án React của mình:

Cách triển khai Lazy Loading trong React

React cung cấp hỗ trợ tích hợp sẵn cho lazy loading bằng cách sử dụng các component React.lazy và Suspense. Dưới đây là hướng dẫn từng bước:

1. Sử dụng React.lazy()

React.lazy() cho phép bạn nhập (import) động các component, chia nhỏ code của bạn một cách hiệu quả thành các phần riêng biệt. Nó nhận một hàm gọi import(), hàm này trả về một Promise sẽ phân giải thành component.


const MyComponent = React.lazy(() => import('./MyComponent'));

Trong ví dụ này, MyComponent sẽ chỉ được tải khi nó sắp được hiển thị.

2. Bao bọc bằng <Suspense>

Vì React.lazy() sử dụng import động, là bất đồng bộ, bạn cần bao bọc component được tải lười bằng một component <Suspense>. Component <Suspense> cho phép bạn hiển thị một giao diện người dùng dự phòng (ví dụ: một spinner tải) trong khi component đang được tải.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...
}> ); }

Trong ví dụ này, thông báo Loading... sẽ được hiển thị trong khi MyComponent đang được tải. Khi component được tải xong, nó sẽ thay thế giao diện người dùng dự phòng.

3. Ví dụ thực tế: Tải lười một Thư viện ảnh lớn

Hãy xem xét một kịch bản nơi bạn có một thư viện ảnh lớn. Tải tất cả các hình ảnh cùng một lúc có thể ảnh hưởng đáng kể đến hiệu suất. Đây là cách bạn có thể tải lười các hình ảnh bằng cách sử dụng React.lazy() và <Suspense>:


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... nhiều hình ảnh hơn
  ];

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Và component Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Trong ví dụ này, mỗi hình ảnh được bao bọc trong một component <Suspense>, vì vậy một thông báo tải sẽ được hiển thị cho mỗi hình ảnh trong khi nó đang được tải. Điều này ngăn chặn toàn bộ trang bị chặn trong khi các hình ảnh đang được tải xuống.

Các kỹ thuật nâng cao và những điều cần cân nhắc

1. Error Boundaries (Ranh giới lỗi)

Khi sử dụng lazy loading, điều quan trọng là phải xử lý các lỗi tiềm ẩn có thể xảy ra trong quá trình tải. Error Boundaries có thể được sử dụng để bắt các lỗi này và hiển thị một giao diện người dùng dự phòng. Bạn có thể tạo một component error boundary như sau:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
      return 
Đã có lỗi xảy ra.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Sau đó, bao bọc component <Suspense> bằng <ErrorBoundary>:



  Loading...}>

Nếu một lỗi xảy ra trong khi tải MyComponent, <ErrorBoundary> sẽ bắt nó và hiển thị giao diện người dùng dự phòng.

2. Server-Side Rendering (SSR) và Lazy Loading

Lazy loading cũng có thể được sử dụng kết hợp với server-side rendering (SSR) để cải thiện thời gian tải ban đầu của ứng dụng của bạn. Tuy nhiên, nó đòi hỏi một số cấu hình bổ sung. Bạn sẽ cần đảm bảo rằng máy chủ có thể xử lý chính xác các import động và các component được tải lười được hydrat hóa đúng cách ở phía client.

Các công cụ như Next.js và Gatsby.js cung cấp hỗ trợ tích hợp cho lazy loading và tách code trong môi trường SSR, làm cho quá trình này dễ dàng hơn nhiều.

3. Tải trước các Component được tải lười

Trong một số trường hợp, bạn có thể muốn tải trước một component được tải lười trước khi nó thực sự cần thiết. Điều này có thể hữu ích cho các component có khả năng sẽ sớm được hiển thị, chẳng hạn như các component nằm bên dưới màn hình đầu tiên nhưng có khả năng sẽ được cuộn vào tầm nhìn. Bạn có thể tải trước một component bằng cách gọi hàm import() thủ công:


import('./MyComponent'); // Tải trước MyComponent

Điều này sẽ bắt đầu tải component trong nền, vì vậy nó sẽ có sẵn nhanh hơn khi nó thực sự được hiển thị.

4. Import động với Webpack Magic Comments

"Magic comments" của Webpack cung cấp một cách để tùy chỉnh tên của các phần code được tạo ra. Điều này có thể hữu ích cho việc gỡ lỗi và phân tích cấu trúc bundle của ứng dụng. Ví dụ:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Điều này sẽ tạo ra một phần code có tên là "my-component.js" (hoặc tương tự) thay vì một tên chung chung.

5. Tránh các lỗi thường gặp

Ví dụ và trường hợp sử dụng trong thế giới thực

Lazy loading có thể được áp dụng cho một loạt các kịch bản để cải thiện hiệu suất của các ứng dụng React. Dưới đây là một số ví dụ:

Ví dụ: Trang web thương mại điện tử quốc tế

Hãy tưởng tượng một trang web thương mại điện tử bán sản phẩm trên toàn cầu. Các quốc gia khác nhau có thể có các loại tiền tệ, ngôn ngữ và danh mục sản phẩm khác nhau. Thay vì tải tất cả dữ liệu cho mọi quốc gia ngay từ đầu, bạn có thể sử dụng lazy loading để tải dữ liệu cụ thể cho vị trí của người dùng chỉ khi họ truy cập trang web.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Hàm để xác định quốc gia của người dùng

  return (
    Đang tải nội dung cho khu vực của bạn...}>
      
      
    
  );
}

Kết luận

Lazy loading và tách code component là những kỹ thuật mạnh mẽ để tối ưu hóa hiệu suất của các ứng dụng React. Bằng cách chỉ tải các component khi chúng cần thiết, bạn có thể giảm đáng kể thời gian tải ban đầu, cải thiện trải nghiệm người dùng và nâng cao SEO của mình. Các component tích hợp sẵn của React là React.lazy() và <Suspense> giúp việc triển khai lazy loading trong các dự án của bạn trở nên dễ dàng. Hãy áp dụng những kỹ thuật này để xây dựng các ứng dụng web nhanh hơn, phản hồi tốt hơn và hấp dẫn hơn cho khán giả toàn cầu.

Hãy nhớ luôn xem xét trải nghiệm người dùng khi triển khai lazy loading. Cung cấp các giao diện người dùng dự phòng đầy đủ thông tin, xử lý các lỗi tiềm ẩn một cách khéo léo và phân tích cẩn thận hiệu suất của ứng dụng để đảm bảo bạn đạt được kết quả mong muốn. Đừng ngại thử nghiệm các cách tiếp cận khác nhau và tìm ra giải pháp tốt nhất cho nhu cầu cụ thể của bạn.