react如何延迟加载

延迟加载的实现方法

React中实现延迟加载（Lazy Loading）通常使用React.lazy和Suspense组件，结合动态导入（Dynamic Imports）技术。这种方法能有效减少初始加载时间，提升应用性能。

使用React.lazy和Suspense

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

React.lazy接收一个返回动态导入的函数，Suspense提供加载中的备用UI（如加载动画）。

路由级别的延迟加载 在React Router中结合延迟加载：

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

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

注意事项

命名导出处理 React.lazy默认支持默认导出（default export）。如需命名导出，需创建中间模块：

// MyComponent.js
export const MyComponent = () => <div>Named Export</div>;

// LazyNamedExport.js
export { MyComponent as default } from './MyComponent';

// 使用
const LazyNamed = React.lazy(() => import('./LazyNamedExport'));

错误边界 建议用错误边界（Error Boundary）处理加载失败：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <h1>Load failed</h1> : this.props.children; }
}

// 使用
<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

替代方案

第三方库

• @loadable/component：支持服务端渲染和更复杂的场景

  import loadable from '@loadable/component';
  const LazyLoadable = loadable(() => import('./Component'), {
  fallback: <div>Loading...</div>,
  });

图片延迟加载 使用原生loading="lazy"属性或Intersection Observer API：

<img src="image.jpg" loading="lazy" alt="Lazy-loaded" />