React lazy+Suspense 实现路由懒加载

最新推荐文章于 2025-04-12 22:22:30 发布

＊且听风吟

最新推荐文章于 2025-04-12 22:22:30 发布

阅读量692

点赞数

CC 4.0 BY-SA版权

分类专栏： # React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/hh18700418030/article/details/130089988

文档

React lazy、Suspense 官方文档

进入页面后，组件的内容会通过 http 请求到对应的组件文件，当路由中有较多的页面时，会出现一个问题，那就是一次性将所有的组件都加载了，浪费性能，所以可以通过懒加载的形式来处理。

src/router/routes.ts，使用 react 的 lazy 进行按需引入：

import {
   
    lazy, LazyExoticComponent } from 'react'

export interface RouteType {
   
   
  path: string
  component: LazyExoticComponent<any>
  title?: string
  exact?: boolean
}

const routes: RouteType[] = [
  {
   
   
    path: '/',
    component: lazy(() => import('@/views/home/HomePage'))
  },
  {
   
   
    path: '/demo/index',
    component: lazy(() => import('@/views/demo/