這是在 React 專案中實現延遲載入和程式碼分割的逐步指南。我們將創建一個具有兩條路線的簡單應用程序，延遲載入元件。

第 1 步：建立一個新的 React 應用程式

如果您還沒有，請使用 Create React App 建立一個新的 React 應用程式：

npx create-react-app lazy-loading-example
cd lazy-loading-example

步驟2：安裝React Router

安裝react-router-dom用於路由：

npm install react-router-dom

第 3 步：設定延遲載入和程式碼分割

建立組件

1. 在src目錄下建立一個名為components的資料夾。
2. 在元件內部，建立兩個檔案：Home.js 和 About.js。

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

更新App.js

現在，修改您的 App.js 檔案以實現延遲載入和路由：

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

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

function App() {
  return (
    
      

      Loading...}>
        
          
          
        
      
    
  );
}

export default App;

第 4 步：運行您的應用程式

現在，運行您的應用程式以查看其實際情況：

npm start

第 5 步：測試延遲載入

1. 開啟瀏覽器並導覽至 http://localhost:3000。
2. 點選「Home」連結即可查看Home元件載入。
3. 點選「About」連結可以看到About元件延遲載入。

重點

• React.lazy用於動態導入元件，只有渲染時才會載入。
• Suspense 用於處理載入狀態，在取得延遲載入元件時顯示回退。
• 這種方法透過將程式碼分割成更小的區塊，顯著減少了初始載入時間。

額外的增強功能

您可以透過以下方式進一步增強您的設定：

• 在延遲載入的元件周圍實作錯誤邊界以捕獲載入錯誤。
• 針對大型應用程式使用 React Router 的高階路由策略。

如果您需要更多具體功能或其他協助，請告訴我！