如何通过代码分割提高 React 应用程序的性能-js教程-PHP中文网

How to Improve the Performance of Your React App with Code Splitting

随着 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'))：仅在需要时动态导入组件。
加载中...;}>：在加载组件时显示后备 UI（例如，加载微调器）。

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

第 1 步：安装 React Router

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;

登录后复制

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

npm install react-router-dom

登录后复制

好处：

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

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

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

示例：

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;

登录后复制

工作原理：

Webpack 为 HeavyComponent 创建一个单独的块。
仅当调用 loadComponent() 时才会加载该块。

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

第 1 步：安装 Webpack Bundle 分析器

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

登录后复制

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

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

登录后复制

第 3 步：分析您的捆绑包

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

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

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

登录后复制

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

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

示例：库的动态导入

npm run build

登录后复制

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

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

登录后复制

代码分割的最佳实践