引言

React 懶加載是一種強大的性能優化技術，通過將代碼拆分為較小的塊并按需加載，有助于減少應用程序的初始包大小。本指南將向您展示如何在 React 應用程序中有效地實現懶加載。

理解 React 懶加載

React 為實現代碼拆分提供了兩個主要功能：

• React.lazy()：允許您將動態導入渲染為常規組件
• Suspense：在等待懶加載組件加載時顯示備用內容

基本實現

簡單組件懶加載

import React, { lazy, Suspense } from'react';


// 不再使用常規導入
// import ExpensiveComponent from './ExpensiveComponent';


// 使用懶加載
constExpensiveComponent = lazy(() =>import('./ExpensiveComponent'));


functionApp() {
return (
    <Suspense fallback={<div>Loading...</div>}>
      <ExpensiveComponent />
    </Suspense>
  );
}

基于路由的懶加載

import React, { lazy, Suspense } from'react';
import { BrowserRouterasRouter, Routes, Route } from'react-router-dom';


// 懶加載路由組件
constHome = lazy(() =>import('./routes/Home'));
constDashboard = lazy(() =>import('./routes/Dashboard'));
constProfile = lazy(() =>import('./routes/Profile'));


functionApp() {
return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

高級模式

1. 自定義加載組件

const LoadingSpinner = () => (
<div className="loading-spinner">
    <div className="spinner"></div>
    <p>Loading content...</p>
  </div>
);


// 可復用的懶加載包裝器
constLazyComponent = ({ component,...props }) => {
return (
    <Suspense fallback={<LoadingSpinner />}>
      <Component {...props} />
    </Suspense>
  );
};


// 使用
constMyLazyComponent = lazy(() =>import('./MyComponent'));
<LazyComponent component={MyLazyComponent} someProp="value" />;

2. 錯誤邊界集成

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


staticgetDerivedStateFromError(error) {
    return { hasError: true };
  }


componentDidCatch(error, errorInfo) {
    console.error('Lazy loading error:', error, errorInfo);
  }


render() {
    if (this.state.hasError) {
      return<div>Something went wrong. Please try again.</div>;
    }


    returnthis.props.children;
  }
}


// 使用懶加載
functionApp() {
return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingSpinner />}>
        <MyLazyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

3. 預加載組件

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


// 當鼠標懸停在按鈕上時預加載組件
functionPreloadButton() {
consthandleMouseEnter = () => {
    const componentPromise = import('./MyComponent');
    // 組件將在懸停時開始加載
  };


return (
    <button 
      onMouseEnter={handleMouseEnter}
      onClick={() => setShowComponent(true)}
    >
      Show Component
    </button>
  );
}

最佳實踐

// 粒度太細（避免）
const Button = lazy(() => import('./Button'));


// 更好 - 懶加載功能模塊
const FeatureModule = lazy(() => import('./features/FeatureModule'));

2、組合相關組件

// 一起懶加載相關組件
const AdminDashboard = lazy(() => import('./admin/Dashboard'));
// 這將在一個塊中加載所有管理組件

const LoadingFallback = () => (
  <div className="loading-state">
    <Skeleton> /* 使用骨架加載 */ </Skeleton>
    <ProgressBar> /* 顯示加載進度 */ </ProgressBar>
  </div>
);


function App() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <MyLazyComponent />
    </Suspense>
  );
}

常見模式和用例

1. 模態框/對話框懶加載

const Modal = lazy(() => import('./Modal'));


function App() {
  const [isOpen, setIsOpen] = useState(false);


  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <Suspense fallback={<LoadingSpinner />}>
          <Modal onClose={() => setIsOpen(false)} />
        </Suspense>
      )}
    </>
  );
}

2. 條件功能加載

function FeatureFlag({ flag, children }) {
  const LazyFeature = lazy(() => 
    flag? import('./NewFeature') : import('./OldFeature')
  );


  return (
    <Suspense fallback={<LoadingSpinner />}>
      <LazyFeature>{children}</LazyFeature>
    </Suspense>
  );
}

性能提示

1、塊命名

?

2、加載優先級

// 高優先級路由
constMainContent = lazy(() =>
import(/* webpackPrefetch: true */'./MainContent')
);


// 低優先級功能
constAnalytics = lazy(() =>
import(/* webpackPreload: true */'./Analytics')
);

要避免的常見陷阱

1. 不要懶加載在初始渲染時始終需要的組件
2. 避免懶加載非常小的組件
3. 不要忘記處理加載和錯誤狀態
4. 小心嵌套的 Suspense 邊界

監控和分析

const trackComponentLoad = (componentName) => {
// 跟蹤加載時間和成功
  performance.mark(`${componentName}-start`);
return {
    success: () => {
      performance.mark(`${componentName}-end`);
      performance.measure(
        `${componentName}-load`,
        `${componentName}-start`,
        `${componentName}-end`
      );
    },
    error: (error) => {
      // 將錯誤記錄到分析中
      console.error(`Failed to load ${componentName}:`, error);
    }
  };
};


// 使用
constMyComponent = lazy(() => {
const tracking = trackComponentLoad('MyComponent');
returnimport('./MyComponent')
  .then(module => {
      tracking.success();
      returnmodule;
    })
  .catch(error => {
      tracking.error(error);
      throw error;
    });
});

結論

React 懶加載是優化大型 React 應用程序的重要工具。通過遵循這些模式和最佳實踐，您可以顯著提高應用程序的初始加載時間和整體性能。

原文地址：https://dev.to/manikanta_ketha_bf00556e9/mastering-react-lazy-loading-a-complete-guideintroduction-4ii5

閱讀原文：原文鏈接