react懒加载实现

使用 React.lazy 和 Suspense

React 提供了 React.lazy 和 Suspense 来实现组件的懒加载。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 Router 中，可以通过 React.lazy 实现路由级别的懒加载，优化页面加载性能。

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

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>
  );
}

自定义懒加载高阶组件

如果需要更灵活的懒加载逻辑，可以封装一个高阶组件（HOC）来实现。

import React, { useState, useEffect } from 'react';

function withLazyLoad(importComponent) {
  return function LazyLoadComponent(props) {
    const [Component, setComponent] = useState(null);

    useEffect(() => {
      importComponent().then((module) => {
        setComponent(() => module.default);
      });
    }, []);

    return Component ? <Component {...props} /> : <div>Loading...</div>;
  };
}

const LazyComponent = withLazyLoad(() => import('./LazyComponent'));

function App() {
  return <LazyComponent />;
}

动态导入与代码分割

通过动态导入（Dynamic Import）结合 Webpack 的代码分割功能，可以进一步优化懒加载的性能。

const loadComponent = () => import('./LazyComponent');

function App() {
  const [Component, setComponent] = useState(null);

  const handleClick = () => {
    loadComponent().then((module) => {
      setComponent(() => module.default);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Load Component</button>
      {Component && <Component />}
    </div>
  );
}

预加载懒加载组件

为了提高用户体验，可以在空闲时预加载懒加载组件。

import React, { Suspense } from 'react';

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

// 预加载组件
const preloadLazyComponent = () => {
  import('./LazyComponent');
};

function App() {
  return (
    <div>
      <button onClick={preloadLazyComponent}>Preload Component</button>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

注意事项

懒加载的组件必须导出为 default，否则会报错。动态导入的模块需要确保路径正确。

// LazyComponent.js 必须导出为 default
export default function LazyComponent() {
  return <div>Lazy Loaded Component</div>;
}