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

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

聖光之護

发布： 2024-12-19 21:42:24

原创

819人浏览过

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

React 代码分割：React.lazy 的应用

优化 React 应用性能的关键技术之一是代码分割，即将 JavaScript 代码拆分成更小的块。React 提供了 React.lazy 这一内置方法，可在组件级别实现代码分割，按需动态加载应用的不同部分。

React.lazy 与代码分割的协同工作机制

动态导入: 使用 ES6 的 import() 语法动态加载组件。
更小的包体积: 将应用拆分成更小的包，缩短初始加载时间。
异步加载: 组件仅在需要时异步加载。

语法

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

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

登录后复制

React.lazy: 用于动态导入组件。
Suspense: 在组件加载期间提供备用 UI。

示例 1：React.lazy 实现基本代码分割

无代码分割

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

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

登录后复制

此方法中，HeavyComponent 与主应用打包在一起，即使并非立即需要。

使用代码分割

import React, { Suspense } from "react";

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

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>加载中...</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>页面加载中...</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)}>加载组件 A</button>
      <button onClick={() => setShowB(true)}>加载组件 B</button>

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

export default App;

登录后复制