vue路由懒加载的实现方式_vue-router路由模式

vue路由懒加载的实现方式_vue-router路由模式本文已参与「新人创作礼」活动,一起开启掘金创作之路1.路由懒加载如何实现当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效当前,我们使用如下方式导入组件importLoginfrom’../views/Login打包后,这些组件都会被打包到一个.s文件中,css代码会打包到css文件中访问应用时,就会下载这js文件和对应的css文件随着代码的增多,文件

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1. 路由懒加载如何实现

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效

当前,我们使用如下方式导入组件

import Login from '../views/Login

打包后,这些组件都会被打包到一个.s文件中,css 代码会打包到 css 文件中

在这里插入图片描述

访问应用时,就会下载这js文件和对应的css文件

在这里插入图片描述

随着代码的增多,文件的体积也会越来越大

文件中包含了所有的用户组件的js以及css代码,但用户可能根本不会浏览器到某些页面,也就是说根本不需要渲染某些组件,所以vue-router 提供了一种路由懒加载机制,就是当某个路由规则匹配时,才会去加载下载并加载某个组件,此时可以提升首页的渲染速度

路由懒加载实现的基础是组件引入方式的变化,需要使用 如下方式引入组件才可以

const Login = () => import('../views/Login')

这是原来的引入方式

import Login from '../views/Login

对比原来的引入方式,就能发现不同点:现在的 Login 是个函数,当路由规则匹配上,就会执行这个函数,才去加载此组件

 {
    path: '/login',
    name: 'login',
    component: Login // 此时的 login 是函数
  },

将所有组件的引入方式都像上面这样修改后,重新打包,由原来的一个js文件拆分成了体积较小的多个js文件

在这里插入图片描述

现在,我们来请求登录页面,请求多个小文件

在这里插入图片描述

此时再访问用户列表页面,会动态加载新的js和css文件,其他页面也都是这种情况

在这里插入图片描述

这种情况,其实是通过增加网络请求次数换取了每次请求包的缩小,可以明显提升首页加载速度

此时,看看这张图,发现再 3G Slow 网速下,加载速度由原来的 36秒多变成了11秒多点,在正常的4G网速下,达到了0.67秒

在这里插入图片描述

2.把组件按组分块

上面,我们是将每个组件都分别打包了,很多时候是没有必要的,可以将多个组件打包到一个包中

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

下面修改上面的代码,进行分组打包

// 1、将登录、用户首页模块打包到一组中,组名:login-home
const Login = () =>
  import(/* webpackChunkName: "login-home" */ '../views/Login')
const Home = () =>
  import(/* webpackChunkName: "login-home" */ '../views/Home')

// 2、将用户模块、权限和角色打包到一组中
const Users = () =>
  import(/* webpackChunkName: "user-rights" */ '../views/Users')
const Roles = () =>
  import(/* webpackChunkName: "user-rights" */ '../views/Roles')
const Rights = () =>
  import(/* webpackChunkName: "user-rights" */ '../views/Rights')

// 3、将商品分类、商品参数、商品列表、添加商品打包到一组中
const GoodsList = () =>
  import(/* webpackChunkName: "goods" */ '../views/goods/GoodsList')
const GoodsAdd = () =>
  import(/* webpackChunkName: "goods */ '../views/goods/GoodsAdd')
const Category = () =>
  import(/* webpackChunkName: "goods */ '../views/goods/Category')
const Params = () =>
  import(/* webpackChunkName: "goods */ '../views/goods/Params')

重新打包

在这里插入图片描述

此时,运行程序,打开各个页面,通过网络查看资源的加载情况,如打开用户列表

在这里插入图片描述

访问商品列表

image.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184919.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • springboot上传文件显示上传进度[通俗易懂]

    springboot上传文件显示上传进度[通俗易懂]springboot上传文件显示上传进度创建maven依赖 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.2.2</version></dependency

  • Red Hat

    Red Hat

  • 深度学习——SPPNet原理[通俗易懂]

    深度学习——SPPNet原理[通俗易懂]从R-CNN到FastR-CNN,有必要了解下SPPNet,其全称为SpatialPyramidPoolingConvolutionalNetworks(空间金字塔池化卷积网络)。它将CNN的输入从固定尺寸改进为任意尺寸,例如在CNN结构中,输入图像的尺寸往往固定的(如224×224像素),输出可看做固定维数的向量。SPPNet在普通的CNN结构中加入了ROI池化层(ROIPo…

  • k8s中Evicted pod 是如何产生的

    k8s中Evicted pod 是如何产生的文章目录事件背景分析被驱逐的原因节点资源不足导致实例被驱逐kubelet驱逐Pod时与资源处理相关的已知问题驱逐Pod未被删除原因分析解决方案结语事件背景最近在线上发现很多Pod处于Evicted状态,通过podyaml可以看到实例是因为节点资源不足被驱逐,但是这些pod并没有被自动清理,平台的大部分用户在操作时看到服务下面出现EvictedPod时会以为服务有问题或者平台有问题的错觉,影响了用户的体验。而这部分Evicted状态的Pod在底层关联的容器其实已经被销毁了,对用户的

  • 四轴平面机器人的手眼标定

    四轴平面机器人的手眼标定四轴平面机器人的手眼标定介绍在实际的机器人应用中,通常会给机器人配备视觉传感器,视觉传感器用于感知周围环境。但是,通过视觉传感器获取的场景坐标是基于视觉坐标系下的,机器人并不能直接使用,要获取机器人可以直接使用的坐标信息,必须将坐标转换到机器人坐标系下。因此,机器人手眼标定的目的是为了获取从视觉坐标系转换到机器人坐标系的转换矩阵。机器人手眼标定问题可以分为两类:1)eye-in-hand,…

  • 导航栏跳转页面[通俗易懂]

    导航栏跳转页面[通俗易懂]一个页面有多个导航栏跳转页面一定要有这三步html结构部分<el-menu:default-active=”path”class=”el-menu-vertical-demo”:unique-opened=”true”@select=”listChange”><el-menu-itemindex=”/index/aiIdentify/achievementWall”>

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号