M
MLOG
Lazy Loading di React: Meningkatkan Performa dengan Code Splitting Komponen | MLOG | MLOG}> ); } export default App;

Dalam contoh ini, komponen Home, About, dan Contact dimuat secara lazy. Saat pengguna menavigasi ke rute tertentu, komponen yang sesuai akan dimuat secara asinkron. Komponen Suspense memastikan bahwa indikator pemuatan ditampilkan saat komponen sedang diambil.

Teknik Lanjutan dan Pertimbangan

Error Boundaries

Error boundaries adalah komponen React yang menangkap kesalahan JavaScript di mana pun dalam pohon komponen turunannya, mencatat kesalahan tersebut, dan menampilkan UI pengganti alih-alih pohon komponen yang rusak. Anda dapat menggunakannya untuk menangani kesalahan yang mungkin terjadi selama pemuatan komponen yang dimuat secara lazy dengan anggun.


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

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

  static getDerivedStateFromError(error) {
    // Perbarui state sehingga render berikutnya akan menampilkan UI pengganti.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Anda juga bisa mencatat error ke layanan pelaporan error
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Anda bisa merender UI pengganti kustom apa pun
      return 
Terjadi kesalahan.
;
    }

    return this.props.children; 
  }
}

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

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

export default App;

Dalam contoh ini, komponen ErrorBoundary membungkus komponen Suspense. Jika terjadi kesalahan selama pemuatan atau rendering MyComponent, ErrorBoundary akan menangkap kesalahan tersebut dan menampilkan UI pengganti.

Praktik Terbaik untuk Lazy Loading

Contoh di Berbagai Industri

Manfaat dari lazy loading dan code splitting di React meluas ke berbagai industri. Berikut beberapa contohnya:

Lebih Jauh dari React.lazy dan Suspense

Meskipun React.lazy dan Suspense menyediakan cara yang mudah untuk menerapkan lazy loading, pustaka dan teknik lain dapat menawarkan fitur dan kontrol yang lebih canggih:

Kesimpulan

Lazy loading di React dengan code splitting komponen adalah teknik yang ampuh untuk mengoptimalkan performa aplikasi React Anda. Dengan memuat komponen sesuai permintaan, Anda dapat secara signifikan mengurangi waktu muat awal, meningkatkan pengalaman pengguna, dan mengurangi konsumsi sumber daya. Dengan memanfaatkan React.lazy dan Suspense, Anda dapat dengan mudah menerapkan lazy loading dalam proyek React Anda dan membuat aplikasi web yang lebih cepat dan lebih responsif. Ingatlah untuk mempertimbangkan penanganan kesalahan, indikator pemuatan, dan teknik canggih lainnya untuk memastikan pengalaman pengguna yang mulus. Terus pantau performa aplikasi Anda dan perbaiki strategi code splitting Anda untuk mencapai hasil yang optimal.

Manfaatkan kekuatan lazy loading dan buka potensi untuk aplikasi web yang lebih cepat, lebih efisien, dan lebih ramah pengguna.