React 代码拆分的几种方法示例详解
作者：杰出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 代码拆分的资料请关注脚本之家其它相关文章！