vue实现路由懒加载的3种方法示例


Posted in Javascript onSeptember 01, 2020

前言

路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大。

  • import按需加载(常用)
  • vue异步组件
  • webpack提供的require.ensure()

1、import按需加载(常用)

允许将不同的组件打包到一个异步块中,需指定了相同的webpackChunkName。

把组件按组分块

const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue')
const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue')
const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')

注意:如果使用的是 babel,需要安装syntax-dynamic-import插件,才能使 babel 可以正确地解析语法。

2、vue异步组件

使用vue的异步组件 , 实现按需加载,每个组件生成一个js文件,实现组件的懒加载。

/* vue异步组件 */
{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }

3、webpack提供的require.ensure()

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

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

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

dependencies: 依赖的模块数组

callback: 回调函数,该函数调用时会传一个require参数

chunkName: 模块名,用于构建时生成文件时命名使用

const A= resolve => require.ensure([], () => resolve(require('@/components/A')), 'A');

注意:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。

总结

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

Javascript 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
json数据处理及数据绑定
Jan 25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
vue+echarts实现动态折线图的方法与注意
Sep 01 #Javascript
node.js 如何监视文件变化
Sep 01 #Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
谈谈node.js中的模块系统
Sep 01 #Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 #Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 #Javascript
You might like
php中常用字符串处理代码片段整理
2011/11/07 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python字符串连接方法分析
2016/04/12 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python机器学习库常用汇总
2017/11/15 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python字符串的拼接方法总结
2019/11/18 Python
Python简单实现区域生长方式
2020/01/16 Python
python中有函数重载吗
2020/05/28 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
优秀的2014年两会精神解读
2014/03/17 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
思想政治表现评语
2015/01/04 职场文书
小鞋子观后感
2015/06/05 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript