react 懶加載組件失敗：優雅的處理方法與優化策略
在 React 應用中，React.lazy 用于代碼分割，提升性能并減小包體積。然而，生產環境中異步加載組件可能因網絡或其他異常導致加載失敗，影響用戶體驗。本文探討如何優雅地處理 React.lazy 加載失敗，并提供解決方案。
問題：
使用 React.lazy 后，生產環境監控顯示部分組件加載失敗，代碼進入 catch 塊。頁面表現及錯誤處理方法不明確。示例代碼如下：
const ModuleA = React.lazy(() => { return new Promise((resolve, reject) => { import('moduleWrap') .then(module => resolve(module)) .catch(err => { /* 處理錯誤 */ }); }); });
解決方案：
建議結合錯誤邊界 (Error Boundaries) 和重試機制來處理 React.lazy 加載失敗。
錯誤邊界捕獲子組件樹中的 JavaScript 錯誤，防止應用崩潰，并顯示備用 ui。重試機制則在加載失敗后多次嘗試，提高成功率。
以下代碼示例結合了錯誤邊界和重試機制：
import React, { Component, lazy, Suspense } from 'react'; // 錯誤邊界 class ErrorBoundary extends Component { state = { hasError: false }; static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, info) { // 記錄錯誤到錯誤報告服務 } render() { if (this.state.hasError) { return <h1>加載失敗</h1>; } return this.props.children; } } // 重試邏輯 function withRetry(importPromise, maxRetries = 3) { let retryCount = 0; function tryImport() { return importPromise().catch(error => { if (retryCount < maxRetries) { retryCount++; console.log(`重試加載組件，第 ${retryCount} 次嘗試...`); return new Promise(resolve => setTimeout(resolve, 1000)).then(tryImport); } throw error; // 拋出錯誤給 ErrorBoundary 處理 }); } return tryImport; } const LazyComponent = lazy(withRetry(() => import('./LazyComponent'))); // 使用懶加載組件 function MyComponent() { return ( <ErrorBoundary> <Suspense fallback={<div>加載中...</div>}> <LazyComponent /> </Suspense> </ErrorBoundary> ); }
此例中，withRetry 函數實現了重試邏輯，最多嘗試三次。ErrorBoundary 捕獲錯誤并顯示友好提示，防止應用崩潰。Suspense 組件在加載過程中顯示加載指示器。 通過此方法，可以有效處理 React.lazy 加載失敗，提升用戶體驗。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
