什么是路由懒加载呢

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量107 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38866594/article/details/129914098
版权

首先我们使用vue-cli创建一个项目
然后运行出来，我们注释一部分内容，然后修改一下路由文件
在这里插入图片描述
在这里插入图片描述

这就是一个刚刚创建的项目，然后你可以看到它的nextwork默认加载了三个文件
注释： vue2默认加载的是两个

当我们切换路由时，network不会发生变化，因为文件再首次加载时就已经全部加载完了

在这里插入图片描述
然后我们再改回路由文件

在这里插入图片描述

首次加载的时候
在这里插入图片描述

再去看about页面变化
在这里插入图片描述

这个时候network中多了一个about.js的文件，如果about文件代量大的时候，这个路由懒加载才会真正的起作用

突破自己，琳琅天上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超简单直观理解懒加载（Lazyload）
weixin_41966912的博客
03-15 1万+
懒加载什么是懒加载懒加载的作用简单的实现 什么是懒加载 懒加载，即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候，如果在进入页面的时候一次性把所有图片加载完，需要很长的时间。为了提升用户体验，我们使用懒加载，当图片出现在浏览器可视区域时，才加载图片。例如各种电商页面。 懒加载的作用 加快页面打开速度，提升用户体验 减少服务器压力和浏览器的负担 简单的实现 1、我们...
路由懒加载
a_b_ccv的博客
12-15 208
为什么用路由懒加载? webpack如果把所有的js文件都打成一个js文件,包会很大,严重影响页面首屏的加载速度 懒加载: 把不同的路由对应的组件分割为不同的代码块 当路由被访问时,才动态加载对应组件文件 怎么做 在脚手架的router.js或者router/index.js中的路由列表routes数组里面,需要加载的路由地址 不要过早的import,应该是路由首次被访问到,才import ...
vue2 动态路由加载
Raywh的博客
02-22 361
vue 路由导航失败，页面异常，白屏，进入死循环
如何判断 懒加载 是否真的 ‘懒加载’了----vue-router 单页面应用中vue-router实现懒加载（按需加载）
qq_33218955的博客
04-12 1421
import Vue from 'vue' import Router from 'vue-router' import LayOut from '@/views/LayOut' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // import page2 from '@...
前端优化之懒加载和预加载
qq_45716607的博客
06-14 3466
转自http://www.jianshu.com/p/4876a4fe7731 一懒加载 1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页
vue路由懒加载的实现方法
08-27
vue路由懒加载的实现方法 vue路由懒加载是指在vue项目中，根据路由的变化来动态加载相应的组件，以提高页面的加载速度和用户体验。以下是vue路由懒加载的实现方法： 1. 动态组件：使用动态import语法来定义代码...
vue实现路由懒加载及组件懒加载的方式
10-16
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
vue2笔记 — vue-router路由懒加载的实现
12-09
在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型项目导致的打包文件过大的问题。 Vue Router 是 Vue.js 的官方路由库，用于管理SPA中的各个视图组件。在默认情况下，所有...
不知道vue路由懒加载，进来看看吧
01-08
一、是什么 路由：即url，vue中一个url对应一个组件 懒加载：用到时，再加载 二、为什么有 ...当打包构建应用时，js包会变得特别大，影响页面加载 可以把不同路由对应的组件分割成不同...五、路由懒加载效果 懒加载方式
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 272
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 749
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 473
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 219
el-table实现。
vue this.$refs 动态拼接
cimbala的博客
07-19 210
业务需要，refs是不固定的。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 663
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 244
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 789
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
vue封装防重复点击事件，并全局挂载使用
m0_47791238的博客
07-22 113
在utils文件夹中(可以和普通工具类存放一起，也可以按自己需求存放)创建js文件 preventReClick.js。1、创建防重复点击的js文件，在js文件中添加防重复点击的方法。
什么是路由懒加载？
05-25
路由懒加载是一种优化网站性能的技术，它是指在需要使用某个组件时再去加载这个组件的方式。在使用路由懒加载之前，所有的组件都会在应用程序启动时一次性加载，这样会导致初始加载时间较长，影响用户体验。但是，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值