React路由懒加载

最新推荐文章于 2024-07-26 11:40:36 发布

YaNglIN123i

最新推荐文章于 2024-07-26 11:40:36 发布

阅读量460

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/YaNglIN123i/article/details/125855684

版权

本文介绍了如何在React应用中利用Lazy和Suspense组件实现代码分割和按需加载，以提高应用性能。通过引入React的Lazy，我们可以延迟组件的加载，而Suspense则用于在组件加载过程中显示占位符。示例展示了如何将B组件以懒加载方式引入，并在路由中使用Suspense设置加载提示。

摘要由CSDN通过智能技术生成

通过lazy 来实现效果首先是引入

import { lazy,Suspense } from 'react';

更改组件引入的方式

const B = lazy(()=>import('../B'))

组册路由组件需要通过Suspense组件包裹，并通过fallback来制定让页面加载过慢时的展示组件

<Suspense fallback={<h1>login</h1>}>
          <Route path="/C" component={C}></Route>
   
          </Suspense>

关注