vue-router路由懒加载_前端懒加载原理

vue-router路由懒加载_前端懒加载原理什么是路由懒加载官方的解释:当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

什么是路由懒加载

官方的解释:

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

官方想表达的意思

  • 首先,我们知道路由中通常会定义很多不同的页面
  • 这个页面最后会被打包到哪里呢?一般情况下是会放在一个js文件中
  • 但是页面这么多,所有文件都放到一个js文件中,必然会造成这个页面会非常的大
  • 如果我们一次性从服务器中请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上会出现短暂空白的情况
  • 如何避免这种情况?使用路由懒加载即可

路由懒加载做了什么

  • 路由懒加载的主要作用是将路由对应的组件打包成一个个js代码块
  • 只要在这个路由被访问到的时候,才加载对应的组件
     

路由懒加载的使用

在使用之前,我们先来看看原先代码是如何加载路由的

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/user/:userId",
    name: "User",
    component: User
  }
];

我们看到从一开始我们就导入了路由对应的组件,如果需要的导入的组件非常多,那么加载页面就会相对较慢,我们来看下这种方式打包出来的文件
vue-router路由懒加载_前端懒加载原理
我们看到这种方式打包出来的文件只有2个js文件,之后我们加载页面的时候,需要把这2个文件全部加载完,页面才会展示,如果代码量过多,那么页面响应就比较慢,给用户体验非常不好

接下来我们使用路由懒加载

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 新增路由懒加载代码
const Home = () => import('../views/Home')
const About = () => import('../views/About')
const User = () => import('../views/User')

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/user/:userId",
    name: "User",
    component: User
  }
];

我们看到,在路由配置中什么都不需要改变,只需要像往常一样使即可,只是在这之前声明了一个变量,变量中使用箭头函数来导入对应的组件,使用起来非常简单。

使用路由懒加载的方式打包出来的文件结构如下:
vue-router路由懒加载_前端懒加载原理
我们可以看到比原来的方式多出了3个js文件,这是因为我们上面代码3个组件使用了路由懒加载,这3个js文件只有路由被访问到了才会去加载,能省下不少的加载时间

所以我们更推荐使用路由懒加载的方式去加载路由

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

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

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

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

(0)
blank

相关推荐

  • [摘]UML学习一:标准建模语言UML的内容

    [摘]UML学习一:标准建模语言UML的内容

  • 10v转16v_nv12和nv21区别

    10v转16v_nv12和nv21区别摘要关于像素格式转换,搜到的帖子基本是NV16转RGB24或NV12转RGB24,对于NV16转NV12并没太多资料,因此我打算参照这两个像素格式的结构,实现这个转换接口。NV16像素格式介绍NV16可以理解为yuyv像素格式的变种,属于YUV422SP类型。整帧图像的大小为Width*Height*2。其像素格式如下:start+00: Y’00 Y’01 Y’02 …

  • 英语学习口诀大全be 的用法口诀

    英语学习口诀大全be 的用法口诀

  • arcgis10.2许可服务器无法启动_gis连接到数据库失败

    arcgis10.2许可服务器无法启动_gis连接到数据库失败记录一次eruka注册中心访问有时404,但是接口路径存在的问题一.事件发生背景二.问题发生原因三.解决办法一.事件发生背景微服务架构,多人共同在自己本地开发同一个微服务,但是注册中心只有一个二.问题发生原因多人在自己本地起项目,注册到了同一个注册中心,且注册的服务名字都一样,因此当请求到达eruka注册中心时,会轮训或随机访问存活的节点,当请求访问到其他人的微服务时,就404了,请求访问到自己的微服务,就正常了(开发的时候,一个application对应了多个服务)三.解决办法将自己的微服务

  • 做直流逆变中用到的全桥逆变电路测试mos管好坏的方法

    做直流逆变中用到的全桥逆变电路测试mos管好坏的方法1)用测电阻法判别结型场效应管的电极根据场效应管的PN结正、反向电阻值不一样的现象,可以判别出结型场效应管的三个电极。具体方法:将万用表拨在R×1k档上,任选两个电极,分别测出其正、反向电阻值。当某两个电极的正、反向电阻值相等,且为几千欧姆时,则该两个电极分别是漏极D和源极S。因为对结型场效应管而言,漏极和源极可互换,剩下的电极肯定是栅极G。也可以将万用表的黑表笔(红表笔也行)任意接触一个

  • 在eclipse中建立java项目

    在eclipse中建立java项目 注意:安装前必备环境:安装eclipse之前必须安装JDK环境。安装方法主要有:下载JDK,安装JDK,配置JDK的环境变量,测设JDK是否安装好。具体步骤详见博文: java开发环境搭建 使用eclipse从头一步步创建java项目1.下载eclipse官网地址:http://www.eclipse.org/downloads/下载EclipseIDEforJava…

发表回复

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

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