React中代码分割的4种实现方式

2024-04-02 19:04:59 864人浏览薄情痞子

摘要

目录前言import()React.lazyimport() + React LoadableUmijs 按需加载总结前言在 React 应用中，我们通常的做法是直接将某个模块导入

前言

在 React 应用中，我们通常的做法是直接将某个模块导入到页面中，这样做导致的结果是打包出来的包体积过大。尤其是在引入了体积巨大的第三个库的情况下，打包后的包体积会十分巨大。因此，我们需要关注我们的应用中所包含的代码，以避免因体积过大而导致加载时间过长。

对代码进行分割能够“懒加载”当前用户所需要的内容，能够显著提高应用的性能。尽管并没有减少应用的整体代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候可以减少所需加载的代码量。

下面，我们分别来介绍下在 React 中实现代码分割的几种方式。

import()

import() 是 webpack 提供的用于分割代码的一个方法。该方法的返回结果是Promise，当文件加载完成后悔将模块导出给 promise.then 方法的回调。

例如有一个 math 模块，导出了 add方法和 minus 方法：

export const add = (a, b) => {
	return a + b;
}

export const minus = (a, b) => {
	return a - b;
}

通常的做法是在页面直接引入模块：

import { add } from './math'

console.log(add(5, 10));

使用 import 动态导入模块：

import('./math').then((math) => {
	console.log(math.add(5, 10))
})

当 WEBpack 解析到该语法时，会自动进行代码分割。如果是使用 Create React App 创建的 React 应用，import 功能已开箱即用。

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./math')
      .then(({ add }) => {
        add(5, 10)
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>两数相加</button>
      </div>
    );
  }
}

export default App;

React.lazy

React.lazy 方法可以让我们动态加载组件，有助于缩减打包后 bundle 的体积，并延迟加载在初次渲染时未用到的组件。

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 export default 的 React 组件。

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

React.lazy 返回的是一个异步组件不能单独使用，需要配合 React.Suspense 使用。当这个异步组件的状态是 pending 时显示的是 Suspense 中 fallback 的内容，只有 resolve 时才会显示加载好的组件。如此使得我们可以在使用 lazy 组件时做优雅降级（如在 fallback添加 loading 效果等）。

import React, { Suspense } from 'react';

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

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

import() + React Loadable

React Loadable 是一个轻量级的代码分割组件，它是一个高阶组件，能让你的应用程序在渲染之前动态的加载任何模块。

使用 import() + React Loadable ，能优雅的实现基于 react-router 4.x 版本的路由分割：

import Loadable from 'react-loadable';

const LoadableBar = Loadable({
  loader: () => import('./components/Bar'),
  loading() {
    return <div>Loading...</div>
  }
});

class MyComponent extends React.Component {
  render() {
    return <LoadableBar/>;
  }
}

在实际业务开发中，我们通常会使用一些框架来快速开发React应用。在这些框架中，通常都会提供按需加载的功能。下面，我们来看看 UmiJS 框架中的按需加载。

UmiJS 按需加载

UmiJS 是一个可扩展的企业级前端应用框架，它以路由为基础，支持配置式路由和约定式路由。UmiJS 封装了一个 dynamic 组件来实现代码分割。

启用按需加载

UmiJS 的按需加载功能默认是关闭的，需要在使用之前通过配置开启。在 UmiJS 项目中添加如下的配置开启：

export default {
  dynamicImport: {},
}

使用按需加载

首先封装一个异步组件：

import { dynamic } from 'umi';
export default dynamic({
  loader: async function() {
    // 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
    const { default: HugeA } = await import( './HugeA');
    return HugeA;
  },
});

然后使用封装好的异步组件：

import React from 'react';
import AsyncHugeA from './AsyncHugeA';

export default () => {
  return <AsyncHugeA />;
}

总结

到此这篇关于React中代码分割的文章就介绍到这了,更多相关React代码分割内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React中代码分割的4种实现方式

本文链接: https://www.lsjlt.com/news/163742.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React中代码分割的4种实现方式

目录前言import()React.lazyimport() + React LoadableUmiJS 按需加载总结前言在 React 应用中，我们通常的做法是直接将某个模块导入...

99+

2024-04-02
React代码分割的实现方法介绍

目录代码分割React.lazy&Suspense异常捕获边界（Error boundaries）基于路由的代码分割命名导出（Named Exports）代码分割打包是个很...

99+

2022-12-03

React代码分割 React代码分割实现方式
React中代码分割的方法是什么

这篇“React中代码分割的方法是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React中代码分割的方法是什么”文章吧...

99+

2023-06-29
C++中string字符串分割函数split()的4种实现方法

目录一、使用stringstream流二、使用string类提供的find方法与substr方法三、使用C库函数strtok四、使用regex_token_iterator（正则表达...

99+

2024-04-02
Java代码中4种字符串拼接方式分析

目录结论最佳实践分析过程环境分析用示例代码：代码及结果分析本文研讨的字符串拼接方式为以下4种：“+”号、StringBuilder、StringJoiner、...

99+

2024-04-02
Mybatis分页的4种方式实例

数组分页查询出全部数据，然后再list中截取需要的部分。 mybatis接口 List<Student> queryStudentsByArray(); xml配置文件...

99+

2024-04-02
React中Suspense及lazy()懒加载及代码分割原理和使用方式

目录React.lazy()概括为什么需要懒加载如何进行代码分割SuspenseSuspense应用场景Suspense实现原理总结Suspense和lazy()都是react中比较...

99+

2024-04-02
Python中4种实现数值的交换方式

目录1.使用临时变量2.使用tuple元组3.使用加减法或乘除法4.使用异或运算1.使用临时变量该方法是最简单的，也是最容易理解的，适用于所有编程语言，其实现过程如下： tm...

99+

2024-04-02
Oracle中分割字符串的方法实例代码

目录1. 使用 regexp_substr() 函数1.1 方式11.2 方式21.3 注意问题（尤其是存储过程中用到，可能会入坑）2. 自定义函数2.1 自定义类型 table2.2 自定义函数2.2.1 自...

99+

2023-02-15

oracle分割字符串 oracle字符串截取 oracle字符串函数
PHP实现安全退出的4种方式

随着网络安全意识的提高，用户安全退出成为了各大网站必须要考虑的功能之一。在程序实现中，PHP作为一种流行的开发语言，安全退出也有多种实现方式。本文将介绍PHP实现安全退出的几种方式。1.利用Session实现安全退出Session用于在服务...

99+

2023-05-14
React开启代理的2种实用方式

开启代理的两种方式 react并没有封装好了的ajax请求的代码供我们直接使用，在进行交互的时候，我们需要自己封装ajax代码或者使用第三方ajax库，一般我们用axios(轻量级)...

99+

2024-04-02
golang实现数组分割的示例代码

需求：给定一个数组和一个正整数，要求把数组分割成多个正整数大小的数组，如果不够分，则最后一个数组分到剩余的所有元素。示例1：数组：[1, 2, 3, 4, 5, 6, 7,...

99+

2024-04-02
Java中实现String字符串分割的3种方法

目录Java中实现String字符串分割的3种方法方法1：split(string) 方法方法2：substring方法方法3：StringTokenizer方法扩展：JAVA 截取...

99+

2023-05-20

java string字符串分割 java 字符串分割
React基于路由的代码分割技术详解

目录代码分割分割基于路由的代码分割代码分割 // app.js import { add } from './math.js'; console.log(add(16, 26));...

99+

2022-12-23

React基于路由代码分割 React 代码分割
Java实现黄金分割法的示例代码

目录1、概述2、黄金分割法3、修改后的黄金分割算法4、编程实现修改后的黄金分割算法1、概述黄金分割法是一种区间收缩方法。所谓区间收缩方法，指的是将含有最优解的区间逐步缩小，直至区...

99+

2024-04-02
JMeter参数化4种实现方式(小结)

目录1 参数化释义2 参数化实现2.1 CSV Data Set ConfigCSV简介CSV实例注意事项2.2 User Parameters2.3 用户定义的变量2.4 Rand...

99+

2024-04-02
React html中使用react的两种方式

基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...

99+

2024-04-02
react dva实现的代码

目录dva使用dva实现dva支持异步router的实现实现：dva dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-...

99+

2024-04-02
java简易文本分割器实现代码

本文实例为大家分享了java文本分割器的具体代码，供大家参考，具体内容如下import java.io.*;class cutIntoPieces{ public static void main(String[] args){ F...

99+

2023-05-31

java 文本分割器 ava
Java中Elasticsearch实现分页方式(三种方式)

目录ES 简介ES 的特点：一、from + size 浅分页二、scroll 深分页scroll删除三、search_after 深分页ES 简介 Elasticsearch 是一...

99+

2024-04-02