使用 React.lazy 进行代码分割：增强应用程序的性能-js教程-PHP中文网

使用 React.lazy 进行代码分割：增强应用程序的性能

Susan Sarandon

发布： 2024-12-23 07:40:44

原创

735 人浏览过

Code Splitting with React.lazy: Enhance Your App’s Performance

在 React 中使用 React.lazy 进行代码分割

代码分割是一种通过将 JavaScript 包分解为更小的块来优化 React 应用程序性能的技术。 React 提供了 React.lazy 作为在组件级别实现代码拆分的内置方式。这允许您根据需要动态加载应用程序的各个部分。

代码分割如何与 React.lazy 一起工作

动态导入：使用ES6 import()动态加载组件。
较小的捆绑包：将应用程序分解为较小的捆绑包，从而减少初始加载时间。
异步加载：仅在需要时异步加载组件。

句法

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

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

登录后复制

React.lazy：动态导入指定组件。
Suspense：在加载组件时提供后备 UI。

示例 1：使用 React.lazy 进行基本代码分割

没有代码分割

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

登录后复制

在这种方法中，整个 HeavyComponent 都与主应用程序捆绑在一起，即使它不是立即需要的。

使用代码分割

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

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

export default App;

登录后复制

现在，HeavyComponent 仅在渲染时才加载。这减少了初始包的大小。

示例 2：路由中的代码分割

代码分割与 React Router 无缝协作，动态加载路由组件。

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

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

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

export default App;

登录后复制

好处：

每个路由组件（Home、About、Contact）仅在访问相应路由时加载。

示例 3：延迟加载多个组件

通过逻辑拆分在单个应用程序中延迟加载多个组件。

import React, { Suspense, useState } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

登录后复制

使用 React.lazy 进行错误处理

React 不提供针对失败导入的内置错误处理。您可以使用错误边界来处理此类情况。

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

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

登录后复制