React 代码拆分的几种方法示例详解

更新时间：2023年03月06日 08:42:05 作者：杰出D

这篇文章主要为大家介绍了React 代码拆分的几种方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前沿

当我们项目越来越大的时候，代码的体积会变得庞大，导致我们项目的加载速度变慢，特别是如果您包含大型第三方库。您需要密切关注包含在bundle中的代码，以免我们的项目体积太大，导致加载时间长，影响用户体验。在React项目中，我们可以通过以下几种方式对代码进行拆分，可以将代码拆分成小的块。让我们的网站速度变快。

动态加载（import）

es6提供import()函数，它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。
import()返回一个 Promise 对象。在React中，我们可以这样去做。通过打包工具，会在打包的过程中对PageModuels生成单独的文件，在运行的时候异步加载

import React, { useState, useEffect } from 'react';
const Index = () => {
  const [Cmp, setCmp] = useState(null);
  useEffect(() => {
    import('./PageModules').then((mod) => setCmp(mod.default));
  }, []);
  return Cmp ? <Cmp /> : <div>Loading...</div>;
};

loadable component

Loadable Components是一个高阶组件，允许您将代码拆分为更小的块并按需加载，支持服务端渲染，使用方式比较简单。

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

它和我们接下来要介绍的React.lazy还有些区别，可参考 loadable-components.com/docs/loadab…

React Lazy 和 React Suspense

React Lazy是react官方提供的解决方案，非常推荐使用该方案去做代码拆分.需要React.Suspense配合，该组件可以指定加载指示器（loading indicator），以防其组件树中的某些子组件尚未具备渲染条件。使用方式如下

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

参考

结束语

如果是新的项目且不需要服务端渲染，推荐使用React.lazy。如果需要服务端渲染的话，推荐使用loadable component。小伙伴们可以分析下你们项目的依赖，把一些模块拆成独立的模块，减少代码体积。

以上就是React 代码拆分的几种方法示例详解的详细内容，更多关于React 代码拆分的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

react路由守卫的实现(路由拦截)
react不同于vue，通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
解读useState第二个参数的"第二个参数"
这篇文章主要介绍了useState第二个参数的"第二个参数",具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React用法之高阶组件的用法详解
高阶组件也就是我们常说的HOC,是React中用于复用组件逻辑的一种高级技巧。这篇文章主要通过一些示例带大家学习一下高阶组件的使用，希望对大家有所帮助
2023-04-04
深入分析React源码中的合成事件
合成事件不是浏览器本身触发的事件，自己创建和触发的事件。本文将从源码角度带大家一起深入了解下React中的合成事件，需要的可以参考一下
2022-11-11
React Hooks与setInterval的踩坑问题小结
本文主要介绍了React Hooks与setInterval的踩坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
react中关于函数调用()与bind this的原因及分析
这篇文章主要介绍了react中关于函数调用()与bind this的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
React状态管理Redux原理与介绍
redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
2022-08-08
React子组件调用父组件的方法
本文主要介绍了React子组件调用父组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-08-08
React Native时间转换格式工具类分享
这篇文章主要为大家分享了React Native时间转换格式工具类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
用React实现一个完整的TodoList的示例代码
本篇文章主要介绍了用React实现一个完整的TodoList的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10