首页　>　文章列表　>　如何通过代码分割提高 React 应用程序的性能

如何通过代码分割提高 React 应用程序的性能

190 2025-04-11

随着 react 应用程序的大小和复杂性不断增长，其 javascript 包的大小会显着影响性能，尤其是在较慢的网络或设备上。缓解此问题的一种有效方法是通过代码拆分，这是一种将应用程序分解为更小的块的技术。这些块按需加载，减少了初始加载时间并提高了整体性能。

在本文中，我们将探讨什么是代码分割、为什么它很重要，以及如何在 react 应用程序中有效地实现它。

什么是代码分割？
代码分割是一种用于将 javascript 代码分割成更小的包的策略，这些包可以在需要时动态加载。代码分割允许您仅发送用户交互立即需要的代码部分，而不是向浏览器提供一个大型 javascript 文件。这减少了应用程序的初始加载时间。

react 使用动态导入和 webpack 等工具来实现代码分割。

代码拆分的好处

减少初始加载时间：仅预先加载关键代码。
提高性能：较小的捆绑包加载速度更快，尤其是在慢速网络上。
高效的资源使用：根据需要加载资源，最大限度地减少未使用的代码。
更好的用户体验：用户体验与您的应用更快的交互。
在 react 中实现代码分割

1。使用 react 的 react.lazy 和 suspense
react 提供了 react.lazy 来延迟加载组件，并提供 suspense 来在获取延迟加载的组件时显示后备 ui。

这是一个例子：
第 1 步：延迟加载组件

import react, { suspense } from 'react';

// lazy load the component
const lazyloadedcomponent = react.lazy(() => import('./lazyloadedcomponent'));

function app() {
  return (
    <div>
      <h1>react code splitting example</h1>
      <suspense fallback={<div>loading...</div>}>
        <lazyloadedcomponent />
      </suspense>
    </div>
  );
}

export default app;

说明：

react.lazy(() => import('./lazyloadedcomponent'))：仅在需要时动态导入组件。
<suspense fallback={<div>loading...</div>}>：在加载组件时显示后备 ui（例如，加载微调器）。

2。按路由分割代码
对于较大的应用程序，按路由拆分代码是提高性能的最有效方法之一。像 react router 这样的库使这个过程变得无缝。

第 1 步：安装 react router

npm install react-router-dom

第 2 步：使用路由实现代码分割

import react, { suspense } from 'react';
import { browserrouter as router, route, switch } from 'react-router-dom';

// lazy load components for routes
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...</div>}>
        <switch>
          <route exact path="/" component={home} />
          <route path="/about" component={about} />
          <route path="/contact" component={contact} />
        </switch>
      </suspense>
    </router>
  );
}

export default app;

好处：

仅加载活动路由的 javascript。
减小初始包的大小。

3。使用 webpack 的动态导入
如果您使用 webpack 作为模块打包器，它支持开箱即用的动态导入。 webpack 将代码分割成可以动态加载的块。

以下是如何在 react 应用程序中使用它：

示例：

function loadcomponent() {
  import('./heavycomponent')
    .then((module) => {
      const component = module.default;
      // use the component here
    })
    .catch((error) => {
      console.error('error loading the component:', error);
    });
}

工作原理：

webpack 为 heavycomponent 创建一个单独的块。
仅当调用 loadcomponent() 时才会加载该块。

4。使用 webpack 包分析器分析您的包
在实施代码分割之前，必须了解是什么影响了包的大小。 webpack 提供了一个名为 bundle analyzer 的工具来可视化包的内容。

第 1 步：安装 webpack 捆绑分析器

npm install --save-dev webpack-bundle-analyzer

第 2 步：配置 webpack
将插件添加到您的 webpack 配置中：

const { bundleanalyzerplugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new bundleanalyzerplugin(),
  ],
};

第 3 步：分析您的捆绑包

运行构建命令来生成报告：

npm run build

分析器将显示一个树状图，显示每个模块的大小，帮助您识别优化机会。

5。使用第三方库进行代码分割
大型第三方库（例如 lodash、moment.js）可能会使您的包大小膨胀。您可以将这些库拆分为单独的块，或使用 tree-shaking 删除库中未使用的部分。

示例：库的动态导入

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('error loading lodash:', error);
  });

摇树示例：
而不是导入整个库：