透過延遲載入來反應應用程式的效能

介紹

在現代 Web 開發世界中，速度和效能是關鍵。隨著你的 React 應用程式的成長，它的套件大小也會增加，這會減慢載入時間。 延遲載入是一種最佳化技術，可讓您僅在需要時載入元件，幫助您減少初始載入時間並提高效能。

什麼是延遲載入？

延遲載入（或程式碼分割）是延遲載入資源（如元件）直到實際需要它們為止的做法。這有助於透過減少初始載入大小來提高應用程式的效能。

例如，在多頁面應用程式中，無需預先載入所有路由的元件。您可以在使用者導航到特定路線時載入它們。這可以減少初始套件大小並縮短載入時間，尤其是在較慢的網路上。

為什麼延遲載入很重要？

1. 縮短初始載入時間：透過先載入必要的元件，初始套件大小更小，從而加快載入時間。

2. 最佳化頻寬使用：不需要的資源在需要時才會獲取，從而減少資料使用。

3. 增強的使用者體驗：更快的載入應用程式可提供更好的使用者體驗，從而提高使用者保留率和參與度。

---

如何在 React 中實現延遲加載

React 使用 React.lazy 和 Suspense 內建了對延遲載入的支持，這是在 React 16.6 中引入的。

React.lazy 和 Suspense 的基本範例

1. 正常導入組件：

   import MyComponent from './MyComponent';

在這種情況下，MyComponent 作為初始套件的一部分載入。

1. 延遲載入元件： 僅在需要時使用 React.lazy 動態載入元件：

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

1. 使用懸念進行後備： 由於延遲載入元件需要時間，React 提供了 Suspense 元件來在取得延遲載入元件時顯示後備 UI（如載入旋轉器）。

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       

         Loading...
}>
           
         
       
     );
   }
   export default App;

在此範例中，當需要 MyComponent 時，React 會動態匯入它並顯示載入訊息，直到元件準備就緒。

---

延後載入路線

延遲載入對於具有多個路由的大型應用程式特別有用。 React Router 允許輕鬆延遲載入路由元件。

1. 如果你還沒安裝react-router-dom：

   npm install react-router-dom

1. 以下是如何延遲載入路由的範例：

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

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

   function App() {
     return (
       <router>
         <suspense fallback="{<div">Loading...}>
           <routes>
             <route path="/" element="{<Home"></route>} />
             <route path="/about" element="{<About"></route>} />
           </routes>
         </suspense>
       </router>
     );
   }
   export default App;

在此範例中，Home 和 About 元件僅在存取其各自的路由時才會延遲載入。

---

延遲載入的高級技巧

1. 預先載入元件：有時，您可能希望在需要元件之前預先載入元件（例如，將滑鼠懸停在連結上時）。這可以透過在滿足某些條件時動態導入元件來完成。

   const preloadAbout = () => {
     import('./pages/About');
   };

1. 區塊命名：Webpack 允許您在使用延遲載入時命名區塊，這有助於偵錯和效能監控。

   const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

1. 錯誤邊界：延遲載入可能會因網路問題而失敗。使用錯誤邊界將有助於優雅地處理此類情況。

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

     static getDerivedStateFromError() {
       return { hasError: true };
     }

     render() {
       if (this.state.hasError) {
         return <div>Error loading component!</div>;
       }
       return this.props.children;
     }
   }

   // Usage
   <errorboundary>
     <suspense fallback="{<div">Loading...}>
       <mycomponent></mycomponent>
     </suspense>
   </errorboundary>

---

性能考慮因素

雖然延遲載入可以顯著提高效能，但應該有策略地使用它。使用過多延遲載入元件重載應用程式可能會在路由或渲染元件之間導航時引入延遲。始終平衡延遲載入與使用者體驗，以避免運行時「過多」載入。

---

結論

延遲載入是提高 React 應用程式效能的有效方法。透過僅在需要時載入元件，您可以減少初始套件大小、節省頻寬並為使用者提供更好的體驗。

使用 React.lazy 和 Suspense 實作延遲載入非常簡單，與 React Router 結合使用時，您可以在應用程式中有效地延遲載入路由。立即使用這些技術來優化您的 React 應用程式！

---

額外資源

• React 文件：程式碼分割
• Webpack 文件：動態導入

以上是透過延遲載入來反應應用程式的效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！