解析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 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
javascript用函数实现对象的方法
May 14 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
vue获取form表单的值示例
Oct 29 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
原生JS运动实现轮播图
Jan 02 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
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
python3中int(整型)的使用教程
2017/03/23 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python入门之井字棋小游戏
2020/03/05 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
Python如何定义一个函数
2015/09/01 面试题
车间统计员岗位职责
2014/01/05 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
创业计划书之熟食店
2019/10/16 职场文书