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 类型转换方法
Oct 24 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
Angular实现响应式表单
Aug 04 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 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
PHP5函数小全(分享)
2013/06/06 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
DOM 事件流详解
2015/01/20 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
centos6.4下python3.6.1安装教程
2017/07/21 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python交互界面的退出方法
2019/02/16 Python
Django后台admin的使用详解
2019/07/08 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python如何停止递归
2020/09/09 Python
Python 实现进度条的六种方式
2021/01/06 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
python基础详解之if循环语句
2021/04/24 Python
排查Tomcat进程假死的问题
2022/05/06 Servers
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电