解析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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
实用的Vue开发技巧
May 30 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
收音机指标测试方法及仪器
2021/03/01 无线电
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
js中的string.format函数代码
2020/08/11 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
数学系个人求职信范文
2014/01/30 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
语文教研活动总结
2014/07/02 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
匿名信格式范文
2015/05/27 职场文书
高老头读书笔记
2015/06/30 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python