如何在 React 中使用延迟加载(lazy loading)进行性能优化？

React 是一個用於構建用戶界面的 JavaScript 庫，它可以幫助開發者構建高性能的應用程序。延遲加載（Lazy Loading）是一種性能優化技術，可以減少應用程序的加載時間，提高用戶體驗。本文將介紹如何在 React 中使用延遲加載（Lazy Loading）來進行性能優化。

什麼是延遲加載（Lazy Loading）？

延遲加載（Lazy Loading）是一種性能優化技術，它可以減少應用程序的加載時間，提高用戶體驗。它的原理是，當用戶訪問應用程序時，只會加載必要的資源，而不是一次性加載所有資源。當用戶需要更多資源時，再按需加載。這樣可以減少應用程序的加載時間，提高用戶體驗。

如何在 React 中使用延遲加載（Lazy Loading）？

React 提供了一個叫做 React.lazy() 的 API，可以用來實現延遲加載（Lazy Loading）。它可以把一個組件的加載延遲到用戶需要時才加載，而不是一次性加載所有組件。

要使用 React.lazy()，首先需要將組件包裝在 React.lazy() 中，然後將其傳遞給 React.Suspense 組件：

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

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

在上面的示例中，MyComponent 組件將會在用戶需要時才加載，而不是一次性加載。React.Suspense 組件可以指定一個 fallback 屬性，用於指定加載時顯示的內容，例如：Loading...。

另外，還可以使用 React.lazy() 來加載應用程序的路由：

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

function App() {
  return (
    
      Loading...