react如何按需加载

按需加载的实现方式

React 的按需加载可以通过动态导入（Dynamic Imports）和 React.lazy 结合 Suspense 实现。动态导入是 ECMAScript 的特性，允许在运行时异步加载模块。React.lazy 是 React 提供的专门用于懒加载组件的 API，而 Suspense 用于在加载过程中显示备用内容。

使用 React.lazy 和 Suspense

动态导入语法结合 React.lazy 可以懒加载组件。Suspense 包裹懒加载组件，提供加载状态的回退 UI。

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, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';

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

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

代码分割与 Webpack 配置

Webpack 默认支持动态导入的代码分割。动态导入的模块会被打包成单独的 chunk，在需要时加载。无需额外配置，但可以通过注释指定 chunk 名称：

const LazyComponent = React.lazy(() => import(/* webpackChunkName: "lazy-component" */ './LazyComponent'));

错误边界处理

React.lazy 加载的组件可能会因网络问题失败，可以通过错误边界（Error Boundary）捕获并处理错误：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Error loading component.</div>;
    }
    return this.props.children;
  }
}

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

预加载策略

通过 preload 或 prefetch 可以在空闲时预加载懒加载的组件，提升用户体验：

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

// 主动触发预加载
const preloadLazyComponent = () => {
  import('./LazyComponent');
};

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