解析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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript事件委托实例分析
May 26 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
一个数据采集类
2007/02/14 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
Javascript 继承机制实例
2009/08/12 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python opencv之SIFT算法示例
2018/02/24 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
如何写好自荐信
2014/04/07 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
技能比武方案
2014/05/21 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
2014年优秀党员材料
2014/12/18 职场文书
同学会邀请函模板
2015/01/30 职场文书
预备党员转正意见
2015/06/01 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书