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)


相关推荐

  • Mac新手使用技巧——Mac如何强制关机

    Mac新手使用技巧——Mac如何强制关机一般情况下,Mac电脑是非常稳定的,但是偶尔也会碰到应用程序没有响应或死机的情况,那么我们需要强制关机,Mac如何强制关机呢?一起来看看吧!1.如果是电脑打开了太多的应用程序造成了没有响应,可以按Command+Q来强制退出。2.如果还是没有反应,很多人喜欢像windows电脑那样按电源键5秒进行强制关机。(这其实是有损坏系统文件的风险)3.如果要采用这种强制切断电源的方法,最好是同时按住control+command+电源键,这样也可以强制关闭电脑,并且不会损坏系统。4.一般关机都是点

  • 软件工程项目_软件工程对象模型图

    软件工程项目_软件工程对象模型图软件工程中应用的几种图辨析:系统流程图、数据流图、数据字典、实体联系图、状态转换图、层次方框图、Warnier图、IPO图、层次图、HIPO图、结构图、程序流程图、盒图、PAD图、判定表、判定树、Jackson图、流图、甘特图、工程网络图我们先将这几种图按照软件工程中的阶段分类~接下来看一下这些图都长什么样子~1.系统流程图2.数据流图3.数据字典4.E-R图5.状态转换图:6…

  • 程序化交易入门_程序化交易的经验之谈

    程序化交易入门_程序化交易的经验之谈这里会分享最新的个人新文章及转载不错的程序化交易文章!![在这里插入图片描述](https://img-blog.csdnimg.cn/20190520205748924.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpc2h1aW…

  • linux思维图集「建议收藏」

    linux思维图集「建议收藏」linux思维图集

  • 四、全卷积网络FCN详细讲解(超级详细哦)[通俗易懂]

    四、全卷积网络FCN详细讲解(超级详细哦)[通俗易懂]四、FCN全卷积网络+upsampling上采样+opencv图像金字塔(超级详细哦)1、全卷积网络(FCN)的简单介绍1.1、CNN与FCN的比较1、上采样理论2、OpenCV图像金字塔1、全卷积网络(FCN)的简单介绍1.1、CNN与FCN的比较在传统的cnn网络中,在在最后的卷积层之后会接上若干个全连接层,将卷积层产生的特征图(featuremap)映射成为一个固定长度的特征向量。一…

  • 锐捷交换机基础配置命令

    锐捷交换机基础配置命令ip地址:ip地址就像你的名字,在你所在的地方管用。mac地址:就像你的身份证,在所有的地方都管用。enable—-进入特权模式config—-进入全局配置模式hostnameruijie2021—-更改设备名称vlan10—-创建vlan10(vlan-虚拟局域网)name123—-给vlan设置名称interfacevlan10—-进入vlan10ipaddress192.168.10.1255.255.255.0—

发表回复

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

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