vue-router路由懒加载及实现的3种方式


Posted in Vue.js onFebruary 28, 2021

什么是路由懒加载?

也叫延迟加载,即在需要的时候进行加载,随用随载。

官方解释:

 1:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。

 2:如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

官方在说什么呢?为什么需要懒加载?

 1:首先,我们知道路由中通常会定义很多不同的页面。

 2:这个页面这项目build打包后,一般情况下,会放在一个单独的js文件中

 3:但是,如果很多的页面都放在同一个js文件中,必然会造成这个页面非常大

 4:如果我们一次性的从服务器中请求下来这个页面,可能会花费一定时间,用户体验不好

 5:如何避免这种情况发生呢?使用路由懒加载就可以了

继续解释原由?

    1:像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大。

    2:造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验。

    3:而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

也就是说:进入页面不用也不需要一次性加载过多资源造成加载时间过程!

路由懒加载做了什么事情?

 1:主要作用是将路由对应的组件打包成一个个的js代码块

 2:只有在这个路由被访问到的时候,才加载对应的组件,否则不加载!

即:只有在这个路由被访问到的时候,才加载对应的组件,否则不加载!

1:.如何实现路由懒加载??

 vue项目实现路由按需加载(路由懒加载)的三种方式:

  1:Vue异步组件

  2:ES6标准语法import()---------推荐使用!!!!!

  3:webpack的require,ensure()

2.Vue异步加载技术

  1:vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,此时一个组件会生成一个js文件。

  2:component: resolve => require(['放入需要加载的路由地址'], resolve)

{
 path: '/problem',
 name: 'problem',
 component: resolve => require(['../pages/home/problemList'], resolve)
 }

3.ES6推荐方式imprort ()----推荐使用

  1:直接将组件引入的方式,import是ES6的一个语法标准,如果需要浏览器兼容,需要转化成es5的语法。

  2:推荐使用这种方式,但是注意wepack的版本>2.4

  3:vue官方文档中使用的也是import实现路由懒加载

  4:上面声明导入,下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知:下面没有指定webpackChunkName,每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
 routes: [
  {
   path: '/Foo',
   name: 'Foo',
   component: Foo
  },
  {
   path: '/Aoo',
   name: 'Aoo',
   component: Aoo
  }
 ]
})

4.webpack提供的require.ensure()实现懒加载:

  1:vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。

  2:这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

  3:require.ensure可实现按需加载资源,包括js,css等。他会给里面require的文件单独打包,不会和主文件打包在一起。

  4:第一个参数是数组,表明第二个参数里需要依赖的模块,这些会提前加载。

 5:第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件。

 6:第三个参数是错误回调。

 7:第四个参数是单独打包的chunk的文件名

此处代码参考原文链接:https://blog.csdn.net/qq_41998083/article/details/109726402

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

4.import和require的比较(了解)

1:import 是解构过程并且是编译时执行

2:require 是赋值过程并且是运行时才执行,也就是异步加载

3:require的性能相对于import稍低,因为require是在运行时才引入模块并且还赋值给某个变量

至此:关于VueRouter懒加载的基本知识以及使用方式已经介绍完毕,逻辑道理很简单, 关键在实践,感谢观看!

总结

到此这篇关于vue-router路由懒加载及实现的3种方式的文章就介绍到这了,更多相关vue-router路由懒加载实现内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue 实现上传组件
May 31 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 #Vue.js
Vue SPA 首屏优化方案
Feb 26 #Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 #Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 #Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 #Vue.js
Vue基本指令实例图文讲解
Feb 25 #Vue.js
vue常用高阶函数及综合实例
Feb 25 #Vue.js
You might like
php获取apk包信息的方法
2014/08/15 PHP
php返回json数据函数实例
2014/10/09 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python导入时小括号大作用
2017/01/10 Python
python实现媒体播放器功能
2018/02/11 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
详解python3中的真值测试
2018/08/13 Python
python创建文件备份的脚本
2018/09/11 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
会计主管岗位职责
2014/01/03 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
质量保证书范本
2014/04/29 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
大队委员竞选稿
2015/11/20 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
linux下安装redis图文详细步骤
2021/12/04 Redis