React 代码拆分

2025年1月12日 | 阅读 4 分钟

React 应用程序使用诸如 Webpack 或 Browserfy 之类的工具将文件打包。打包是一个将多个文件合并为单个文件的过程，该文件称为bundle。该 bundle 负责在网页上一次加载整个应用程序。我们可以从下面的例子中理解它。

App.js

import { add } from './math.js';

console.log(add(16, 26)); // 42

math.js

export function add(a, b) {
  return a + b;
}

Bundle 文件如下

function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

随着应用程序的增长，我们的 bundle 也会增长，尤其是在使用大型第三方库时。如果 bundle 大小过大，则需要很长时间才能在网页上加载。为了避免大型捆绑，最好开始拆分你的 bundle。

React 16.6.0 于 2018 年 10 月 发布，并引入了一种执行代码分割的方法。代码分割是 Webpack 和 Browserify 支持的一项功能，它可以创建多个可在运行时动态加载的 bundle。

代码分割使用 React.lazy 和 Suspense 工具/库，这有助于你延迟加载依赖项，并且仅在用户需要时才加载它。

代码分割提高了

应用程序的性能
对内存的影响
下载的千字节（或兆字节）大小

React.lazy

将代码分割到应用程序中的最佳方法是通过动态 import() 语法。 React.lazy 函数允许我们将动态导入渲染为常规组件。

Before（在……之前）

import ExampleComponent from './ExampleComponent';

function MyComponent() {
  return (
    <div>
      <ExampleComponent />
    </div>
  );
}

之后 (After)

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

function MyComponent() {
  return (
    <div>
      <ExampleComponent />
    </div>
  );
}

上面的代码段在渲染 ExampleComponent 时会自动加载包含 ExampleComponent 的 bundle。

悬念

如果包含 ExampleComponent 的模块尚未被函数组件 (MyComponent) 加载，则我们需要在等待加载时显示一些回退内容。我们可以使用 suspense 组件来做到这一点。换句话说，suspense 组件负责处理获取和渲染惰性组件时的输出。

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <ExampleComponent />
      </Suspense>
    </div>
  );
}

fallback 属性接受你希望在等待组件加载时渲染的 React 元素。我们可以将多个惰性组件与单个 Suspense 组件组合在一起。可以在下面的例子中看到。

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <ExampleComponent />
          <ExamComponent />
        </section>
      </Suspense>
    </div>
  );
}

注意： React.lazy 和 Suspense 组件尚不能用于服务器端渲染。对于服务器渲染应用程序中的代码分割，建议使用 Loadable Components。

错误边界

如果任何模块无法加载，例如，由于网络故障，我们将收到错误。我们可以使用错误边界处理这些错误。创建错误边界后，我们可以在惰性组件上方的任何位置使用它来显示错误状态。

import MyErrorBoundary from './MyErrorBoundary';
const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));
const ExamComponent = React.lazy(() => import('./ ExamComponent'));

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <ExampleComponent />
          <ExamComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

基于路由的代码分割

决定在应用程序中引入代码分割的位置非常棘手。为此，我们必须确保选择可以均匀分割 bundle 而不会破坏用户体验的地方。

路由是开始代码分割的最佳位置。基于路由的代码分割在 web 上的页面转换期间至关重要，这需要一些时间来加载。这是一个关于如何使用带有 React.lazy 的 React Router 在应用程序中设置基于路由的代码分割的示例。

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

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

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

命名导出

目前，React.lazy 仅支持默认导出。如果要使用命名导出导入任何模块，则需要创建一个中间模块，将其重新导出为默认导出。我们可以从下面的例子中理解它。

ExampleComponents.js

export const MyFirstComponent = /* ... */;
export const MySecondComponent = /* ... */;

MyFirstComponent.js

MyApp.js

import React, { lazy } from 'react';
const MyFirstComponent = lazy(() => import("./MyFirstComponent.js"));

下一个主题React Context

React 代码拆分

React.lazy

悬念

注意： React.lazy 和 Suspense 组件尚不能用于服务器端渲染。对于服务器渲染应用程序中的代码分割，建议使用 Loadable Components。

错误边界

基于路由的代码分割

命名导出

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 代码拆分

React.lazy

悬念

注意： React.lazy 和 Suspense 组件尚不能用于服务器端渲染。 对于服务器渲染应用程序中的代码分割，建议使用 Loadable Components。

错误边界

基于路由的代码分割

命名导出

相关帖子

React 动画

React Redux 示例

React 安装

React 表格

React Map

React 键

高阶组件

React 状态

组件生命周期

React Props

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器

注意： React.lazy 和 Suspense 组件尚不能用于服务器端渲染。对于服务器渲染应用程序中的代码分割，建议使用 Loadable Components。