React代码拆分的方法有哪些

本篇内容介绍了“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还有些区别

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代码拆分的方法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！