React Router(二)

React中的路由懒加载方案

在真实项目中,如果我们事先把所有组件全部导入进来,再基于Route做路由匹配,这样:最后项目打包的时候,所有组件全部打包到一个js中。

在这里插入图片描述

这样JS会非常的大:

  • 第一次加载页面的时候,从服务器获取这个JS文件就会用很久的时间,导致此阶段页面一直处于白屏的状态,这样很不好

虽然说优化方案中,有建议合并为一个JS文件,这样减少HTTP网络请求的次数,但是这个JS文件不宜过大。


我们最好的处理方案是这样的:

  1. 我们只把最开始要展示的内容/组件打包到“主JS”中「bundle.js」,其余的组件,打包成独立的JS「或者几个组价合并在一起打包」
  2. 当页面加载的时候,首先只把“主JS”「bundle.js」请求回来渲染,其余的JS先不加载
    • 因为bundle.js中只有最开始要渲染组件的代码,所以体积小,获取和渲染速度快,可以减少白屏等待的时间
    • 其余的JS此时并没有加载,也不影响页面第一次渲染
  3. 当我路由切换的时候,和哪个规则匹配,想要渲染哪个组件,再把这个组件所在的JS文件,动态导入进来进行渲染即可

分割打包JS、按需异步加载JS ====> 路由懒加载


  • 事先只把A组件【页面一加载就要渲染的组件】导入进来,也就是打包到bundle.js主JS文件中
  • 借助React.lazy函数和ES6中的import实现
    • 分割打包:每个组件单独打包为一个JS
    • 按需导入/加载:最开始渲染页面不会加载这些单独的JS,只有路由规则匹配成功,需要渲染这个组件的时候,再去加载

一级路由路由文件routes.js:

import A from '../views/A'
import {
    lazy } from 'react'
/* import B from '../views/B'
import C from '../views/C' */
import aRoutes from './aRoutes'
// 一级路由的路由表
const routes = [{
   
    redirect: true,
    from: '/',
    to: '/a',
    exact: true
}, {
   
    path: '/a',
    name: 'a',
    component: A,
    meta: {
   },
    children: aRoutes
}, {
   
    path: '/b',
    name: 'b',
    component: lazy(() => import('../views/B')),
    meta: {
   }
}, {
   
    path: '/c',
    name: 'c',
    component: lazy(() => import('../views/C')),
    mata: {
   }
}, {
   
    redirect: true,
    to: '/a'
}]
export default routes

二级路由路由文件aRoutes.js:

import A1 from "../views/a/A1"
import {
    lazy } from "react"
/* import A2 from "../views/a/A2"
import A3 from "../views/a/A3" */
const aRoutes = [{
   
    redirect: true,
    from: '/a',
    to: '/a/a1',
    exact: true
}, {
   
    path: '/a/a1',
    name: 'a-a1',
    component: lazy(() => import('../views/a/A1')),
    meta: {
   }
}, {
   
    path: '/a/a2',
    name: 'a-a2',
    component: lazy(() => import('../views/a/A2')),
    meta: {
   }
}, {
   
    path: '/a/a3',
    name: 'a-a3',
    component: lazy(() => import('../views/a/A3')),
    meta: {
   }
}]
export default aRoutes

在这里插入图片描述
在这里插入图片描述
原因:默认页面一加载就渲染A组件,然后A组件中二级路由重定向到/a/a1,加载渲染A1组件的js,这个过程是动态加载,异步加载过程中需要一个处理机制—路由懒加载,一定需要Suspense的支持。

Suspense.fallback:在异步加载的组件没有处理完成之前,先展示的Loading效果。

index.js:

import React, {
    Suspense } from "react";
...
                // 正常匹配规则
                config = {
    path }
                if (exact) config.exact = true
                return <Route key={
   index}  {
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值