在現代 Web 開發世界中，速度和效能是關鍵。隨著你的 React 應用程式的成長，它的套件大小也會增加，這會減慢載入時間。 延遲載入是一種最佳化技術，可讓您僅在需要時載入元件，幫助您減少初始載入時間並提高效能。
延遲載入（或程式碼分割）是延遲載入資源（如元件）直到實際需要它們為止的做法。這有助於透過減少初始載入大小來提高應用程式的效能。
例如，在多頁面應用程式中，無需預先載入所有路由的元件。您可以在使用者導航到特定路線時載入它們。這可以減少初始套件大小並縮短載入時間，尤其是在較慢的網路上。
縮短初始載入時間：透過先載入必要的元件，初始套件大小更小，從而加快載入時間。
最佳化頻寬使用：不需要的資源在需要時才會獲取，從而減少資料使用。
增強的使用者體驗：更快的載入應用程式可提供更好的使用者體驗，從而提高使用者保留率和參與度。
React 使用 React.lazy 和 Suspense 內建了對延遲載入的支持，這是在 React 16.6 中引入的。
import MyComponent from './MyComponent';
在這種情況下，MyComponent 作為初始套件的一部分載入。
const MyComponent = React.lazy(() => import('./MyComponent'));
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
Loading... }>
在此範例中，當需要 MyComponent 時，React 會動態匯入它並顯示載入訊息，直到元件準備就緒。
延遲載入對於具有多個路由的大型應用程式特別有用。 React Router 允許輕鬆延遲載入路由元件。
npm install react-router-dom
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...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}
export default App;
在此範例中，Home 和 About 元件僅在存取其各自的路由時才會延遲載入。
const preloadAbout = () => {
import('./pages/About');
};
const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));
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...</div>}>
<MyComponent />
</Suspense>
</ErrorBoundary>
雖然延遲載入可以顯著提高效能，但應該有策略地使用它。使用過多延遲載入元件重載應用程式可能會在路由或渲染元件之間導航時引入延遲。始終平衡延遲載入與使用者體驗，以避免運行時「過多」載入。
延遲載入是提高 React 應用程式效能的有效方法。透過僅在需要時載入元件，您可以減少初始套件大小、節省頻寬並為使用者提供更好的體驗。
使用 React.lazy 和 Suspense 實作延遲載入非常簡單，與 React Router 結合使用時，您可以在應用程式中有效地延遲載入路由。立即使用這些技術來優化您的 React 應用程式！
以上是透過延遲載入來反應應用程式的效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
