M
MLOG
React Lazy Loading: Tăng Cường Hiệu Năng Bằng Cách Tách Mã Component | MLOG | MLOG}> ); } export default App;

Trong ví dụ này, các component Home, About, và Contact được lazy load. Khi người dùng điều hướng đến một route cụ thể, component tương ứng sẽ được tải bất đồng bộ. Component Suspense đảm bảo rằng một chỉ báo tải sẽ được hiển thị trong khi component đang được tìm nạp.

Các Kỹ thuật Nâng cao và Lưu ý

Error Boundaries

Error boundaries là các component React bắt lỗi JavaScript ở bất kỳ đâu trong cây component con của chúng, ghi lại các lỗi đó và hiển thị một giao diện người dùng dự phòng thay vì cây component đã bị sập. Bạn có thể sử dụng chúng để xử lý một cách mượt mà các lỗi có thể xảy ra trong quá trình tải các component được lazy load.


import React, { lazy, Suspense } from 'react';

class ErrorBoundary extends React.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; 
  }
}

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

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

export default App;

Trong ví dụ này, component ErrorBoundary bao bọc component Suspense. Nếu có lỗi xảy ra trong quá trình tải hoặc render MyComponent, ErrorBoundary sẽ bắt lỗi và hiển thị giao diện người dùng dự phòng.

Các Thực tiễn Tốt nhất cho Lazy Loading

Ví dụ trong các ngành công nghiệp

Lợi ích của React lazy loading và code splitting mở rộng ra nhiều ngành công nghiệp khác nhau. Dưới đây là một vài ví dụ:

Ngoài React.lazy và Suspense

Mặc dù React.lazy và Suspense cung cấp một cách đơn giản để triển khai lazy loading, các thư viện và kỹ thuật khác có thể cung cấp các tính năng và quyền kiểm soát nâng cao hơn:

Kết luận

React lazy loading kết hợp với tách mã component là một kỹ thuật mạnh mẽ để tối ưu hóa hiệu năng cho các ứng dụng React của bạn. Bằng cách tải các component theo yêu cầu, 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à giảm tiêu thụ tài nguyên. Bằng cách tận dụng React.lazy và Suspense, bạn có thể dễ dàng triển khai lazy loading trong các dự án React của mình và tạo ra các ứng dụng web nhanh hơn, nhạy hơn. Hãy nhớ xem xét xử lý lỗi, chỉ báo tải và các kỹ thuật nâng cao khác để đảm bảo trải nghiệm người dùng liền mạch. Liên tục theo dõi hiệu suất ứng dụng của bạn và tinh chỉnh chiến lược tách mã để đạt được kết quả tối ưu.

Hãy nắm bắt sức mạnh của lazy loading và mở khóa tiềm năng cho một ứng dụng web nhanh hơn, hiệu quả hơn và thân thiện với người dùng hơn.