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

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。按路由分割代码
对于较大的应用程序，按路由拆分代码是提高性能的最有效方法之一。像 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);
  });

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

import { uniq } from 'lodash';

代码分割的最佳实践

1. 从基于路由的拆分开始：这是减少初始加载时间的最简单、最有效的方法。
2. 避免过度分割：太多的块会导致过多的 http 请求。
3. 将代码分割与延迟加载相结合：仅加载当前用户交互所需的内容。
4. 监控性能：使用 lighthouse 等工具来衡量实施代码分割后的改进。
5. 使用现代构建工具：webpack、vite 和 parcel 等工具提供对代码分割的内置支持。

结论
代码分割是一种强大的优化技术，可以极大地提高 react 应用程序的性能。通过将您的应用程序分成更小的块并按需加载它们，您可以减少初始加载时间，改善用户体验，并使您的应用程序更加高效。

从基于路由的拆分开始，然后尝试组件级或库级拆分，以根据您的应用需求进行优化。将代码分割与其他性能技术（例如延迟加载和树摇动）相结合，以最大限度地提高 react 应用程序的效率。

本篇关于《如何通过代码分割提高 React 应用程序的性能》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！