React代码分割的实现方法介绍
更新时间：2022年12月03日 11:38:06 作者：码农小菲
虽然一直有做react相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,所以下面这篇文章主要给大家介绍了关于React中代码分割的方式,需要的朋友可以参考下
代码分割
- 打包是个很棒的技术，但随着代码量的增加，容易出现体积过大而导致加载时间过长。为避免这种情况的出现，在前期就思考该问题并对代码包进行分割是个不错的选择。
- 对应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，提高应用性能。尽管并没有减少应用整体的代码体积，但可以避免加载用户不需要的代码，并在初始加载的时候减少所需加载的代码量。
- 简单理解：是性能优化的一种解决方案。比如我们的路由系统中有100个组件，我们在react项目启动时不需要对这100个组件都进行编译，只编译当前URL对应的组件，这就可以用到代码分割的功能；
React.lazy&Suspense
- 动态引入
//使用前：
import OtherComponent from './OtherComponent';
//使用之后：
const OtherComponent = React.lazy(() => import('./OtherComponent'))
- 在组件首次渲染时，自动导入包含该组件的包
- React.lazy 接受一个函数，这个函数需要动态调用import()。它必须返回一个Promist,该Promise 需要resolve 一个default export 的react组件
- 然后应在 Suspense 组件中渲染 lazy 组件，这样可以在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'))
const AnotherComponent = React.lazy(() => import('./AnotherComponent'))
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}- fallback:接受任何在组件加载过程中你想展示的 React 元素
- Suspense 组件置于懒加载组件之上的任何位置
异常捕获边界（Error boundaries）
如果模块加载失败（如网络问题），它会触发一个错误。可以通过异常捕获边界（Error boundaries）技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。
import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
<div>
<MyErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</MyErrorBoundary>
</div>
);基于路由的代码分割
可以选择从路由开始实现代码分割。
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);命名导出（Named Exports）
- React.lazy 目前只支持默认导出（default exports）
- 若导出其他模块，可以创建一个中间模块，来重新导出为默认模块
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));
到此这篇关于React代码分割的实现方法介绍的文章就介绍到这了,更多相关React代码分割内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近两个项目都用到了React Navigation，所以就研究一下如何使用，本文主要介绍了react-navigation6.x路由库的基本使用，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了redux的原理、工作流程及其应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
React Native模块之Permissions权限申请的实例相机
这篇文章主要介绍了React Native模块之Permissions权限申请的实例相机的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
本文通过代码给大家介绍了使用react-color实现前端取色器的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
本篇文章主要介绍了react native与webview通信的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
刚好手上有一个要实现文字跑马灯的react项目，然后ant-design上面没有这个组件，于是只能自己手撸一个，文中的实现方法讲解详细，希望对大家有所帮助2023-01-01
这篇文章主要为大家介绍了减少react组件不必要的重新渲染实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
react native reanimated实现动画示例详解
这篇文章主要为大家介绍了react native reanimated实现动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了react-native 实现渐变色背景过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了React Native功能丰富的Toast通知库使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论