代码拆分：React.lazy与Suspense实现

React.lazy 与 Suspense 可实现组件动态加载，减少初始包体积，提升首屏性能；通过 import() 动态引入组件，Suspense 包裹并设置 fallback 加载提示，结合 React Router 实现路由级代码拆分，配合 Error Boundary 处理加载失败，保障用户体验完整。

在现代前端开发中，提升应用加载性能的关键手段之一是代码拆分。React 提供了 React.lazy 与 Suspense 的组合方案，让开发者可以轻松实现组件级别的动态加载，从而减少初始包体积，加快首屏渲染速度。

React.lazy：动态导入组件

React.lazy 允许你像渲染普通组件一样动态加载一个使用动态 import() 加载的组件。它接收一个返回 Promise 的函数，该 Promise 需要 resolve 一个导出为 default 的 React 组件。

示例：

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

注意：目前 React.lazy 只支持默认导出（default exports）。

Suspense：处理加载状态

仅仅使用 React.lazy 是不够的，因为组件加载需要时间。Suspense 用于在组件异步加载时显示 fallback 内容，比如加载动画或占位符。

Suspense 包裹 lazy 组件，并通过 fallback 属性指定加载过程中的提示内容。

示例：

<Suspense fallback="<div>正在加载...</div>">
  <LazyComponent />
</Suspense>

Suspense 可以包裹多个 lazy 组件，且支持嵌套使用，统一管理加载状态。

国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能，更是采用了目前互联网上最流行的LAMP组合（Linux+Apache+Mysql+PHP）开发完成，模板技术实现了界面与代码的有效分离，用户可以快速地在此基础上编译模板；提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

0

查看详情

实际应用场景

常见于路由级别的代码拆分。结合 React Router 使用，可按需加载不同页面。

例如：

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

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

这样，只有访问对应路由时，才会加载相应组件代码。

错误处理与边界控制

Suspense 本身不处理加载失败的情况（如网络错误）。你需要配合 Error Boundary（错误边界）来捕获和处理异常。

创建一个错误边界组件：

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

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

  render() {
    if (this.state.hasError) {
      return <div>加载失败，请刷新重试。</div>;
    }
    return this.props.children;
  }
}

然后将它包裹在 Suspense 外层：

<ErrorBoundary>
  <Suspense fallback="<div>加载中...</div>">
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

基本上就这些。React.lazy 与 Suspense 的组合为代码拆分提供了简洁而强大的支持，合理使用能显著优化用户体验。不复杂但容易忽略的是加载状态和错误处理的完整性。

以上就是代码拆分：React.lazy与Suspense实现的详细内容，更多请关注php中文网其它相关文章！