Vue路由的懒加载深入详解
作者：落雪小轩韩 发布时间：2024-05-28 16:03:58
标签：Vue,路由,懒加载
一、概念
官方描述：
当打包构建应用时，Javascript包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成功不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
解析：
路由中通常会定义很多不同的页面，这些页面打包后被放在一个js文件中，但是这么多页面放在一个js文件中必然会造成页面非常大。如果我们一次性从服务器上请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还可能会出现短暂的空白情况，使用路由的懒加载就可以避免这种情况了。
路由懒加载做了什么？
主要作用就是将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问的时候才加载对应的组件。
二、代码实现
普通写法：
import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
路由懒加载写法：
import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
component: () => import('../components/Home')
},
{
path: '/about',
component: () => import('../components/About')
}
]
三、打包文件的解析
执行打包的命令 npm run build
app.xxxx.js 当前应用程序开发的所有代码（业务代码）
manifest.xxxx.js 为打包的代码做底层支撑的（为模块化…做底层支撑） vendor.xxxx.js vendor(提供者，第三方依赖包vue,vue-loader,…)
当使用了路由懒加载后打包
用到了两个路由懒加载，多分出了两个js文件。这两个js文件不会一开始就从服务器上请求下来，它会等我们真正需要用的时候再请求下来。
来源：https://blog.csdn.net/m0_46613429/article/details/128420980
0
投稿猜你喜欢
- 前言为了让大家更好的理解本期知识点，先介绍以下几个知识点：线性结构、非线性结构、循环、迭代、遍历、递归。线性结构：数组、队列非线性结构：树、
- 2008北京奥运会块到了，下面的js代码将告诉你，离奥运会开幕还要多少天！让我们一起迎接这美好的时刻。相关文章推荐：各种北京2008奥运会倒
单下划线单下划线用作变量最常见的一种使用场景是作为变量占位符，使用场景明显可以减少代码中多余变量的使用。为了方便理解，_可以看作被丢弃的变量- 1. 序网页弹框是个很常见的功能，比如需要告知用户消息的时候 (Alert)，需要用户进行确认的时候 (Confirm)，需要用户补充一点信
- 1. FILE APIhtml5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。2. example<htm
- 华丽的文本框演示首先看看演示结果：实现代码import matplotlib.pyplot as pltplt.text(0.8, 0.5,
- 卷积在pytorch中有两种实现，一种是torch.nn.Conv2d()，一种是torch.nn.functional.conv2d()，
- 考虑到数据安全问题，准备把服务器上的数据库迁移到刚刚挂载的云硬盘上，研究一下，这个方法是最靠谱的，分享之！首先建立数据库即将迁移到的目录mk
- MySql：MySQL数据库实现分页比较简单，提供了 LIMIT函数。一般只需要直接写到sql语句后面就行了。LIMIT子 句可以用来限制由
- 这是一个非常简单的解决方案，柱状图中每一条柱都是一个 div，数据的大小呈现在 div 的宽或高上。 查看演示 例子下载实现的原理
- >>> a = 2.5 >>> b = 2.5 >>> c = b >>&
- 细节汇总函数的形参列表可以是多个，返回值列表也可以是多个形参列表和返回值列表的数据类型，可以是值类型、也可以是引用类型函数的命名遵循标识符命
- 废话少说，直接上代码<script type="text/javascript"> &
- 一、主要目的最近在玩Python网络爬虫，然后接触到了selenium这个模块，就捉摸着搞点有意思的，顺便记录一下自己的学习过程。二、前期准
- 能够操控日期和时间对于大多数编程语言来说是基本的能力，Perl也不例外。但是在碰到与时间相关的更加复杂的处理时，Perl自带的功能常常就显得
- 本文实例讲述了python去除文件中空格、Tab及回车的方法。分享给大家供大家参考，具体如下：在最近的开发工作中，为了应付比赛赶进度，服务端
- 本文实例讲述了机器学习之KNN算法原理及Python实现方法。分享给大家供大家参考，具体如下：文中代码出自《机器学习实战》CH02，可参考本
- PIL：Python Imaging Library，已经是Python平台事实上的图像处理标准库了。PIL功能非常强大，但API却非常简单
- 这篇文章主要介绍了wxpython自定义下拉列表框过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- hasattr(object, name)作用：判断对象object是否包含名为name的特性（hasattr是通过调用getattr(oj
