解析vue路由异步组件和懒加载案例


Posted in Javascript onJune 08, 2018

最近研究了vue性能优化,涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。

原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。

案例:

首先是组件,创建四个组件分别命名为first、second、three和four;内容如下

first

<template> 

<div>我是第一个页面</div> 

</template>

 

second

<template> 

<div>我是第二个页面</div> 

</template>

 

three

<template> 

<div>我是第三个页面</div> 

</template>

four
<template> 
<div>我是第四个页面</div> 
</template>

路由index.js代码,异步组件方式有两种,代码中的方案1和方案2;注意:方案1需要添加syntax-dynamic-import插件

import Vue from 'vue'

import VueRouter from 'vue-router'

/*import First from '@/components/First' 

import Second from '@/components/Second'*/

  

Vue.use(VueRouter) 

//方案1

const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");

const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");

const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");

const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");

//方案2

const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')

const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')

const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')

const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')

 

//懒加载路由 

const routes = [ 

 {  //当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示first页面 

 path:'/', //重定向,就是给它重新指定一个方向,加载一个组件; 

 component:first 

 }, 

 { 

 path:'/first', 

 component:first

 }, 

 { 

 path:'/second', 

 component:second

 }, { 

 path:'/three', 

 component:three

 }, 

 { 

 path:'/four', 

 component:four

 } 

//这里require组件路径根据自己的配置引入 

] 

//最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。 

  

 const router = new VueRouter({ 

 routes 

}) 
export default router;

最后,如果想要让build之后的代码更便于识别,配置webpack代码

解析vue路由异步组件和懒加载案例

运行 npm run build结果

解析vue路由异步组件和懒加载案例

注意方案1和方案2只能用一个。然后运行项目试验一下就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
element中table高度自适应的实现
Oct 21 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
node中modules.exports与exports导出的区别
Jun 08 #Javascript
Vue不能观察到数组length的变化
Jun 08 #Javascript
Node.js中的child_process模块详解
Jun 08 #Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 #Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 #Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
Node.js中你不可不精的Stream(流)
Jun 08 #Javascript
You might like
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
Javascript window对象详解
2014/11/12 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
详解 Python 读写XML文件的实例
2017/08/02 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
家长对老师的感言
2014/03/11 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python