vue按需加载实例详解


Posted in Javascript onSeptember 06, 2019

vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。这种方式下一个组件生成一个js文件

用例:

{
path: '/promisedemo',   name: 'PromiseDemo',   component: resolve => require(['../components/PromiseDemo'], resolve)
}

es提案的import() (推荐)

webpack官方文档:webpack中使用import()

vue官方文档:路由懒加载(使用import())

用例:

// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2') // 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 // const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo') // const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2') export default new Router({   routes: [     {       path: '/importfuncdemo1',       name: 'ImportFuncDemo1',       component: ImportFuncDemo1     },     {       path: '/importfuncdemo2',       name: 'ImportFuncDemo2',       component: ImportFuncDemo2     }   ] })

webpack提供的require.ensure()

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

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

举例如下:

{   path: '/promisedemo',   name: 'PromiseDemo',   component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo') }, {   path: '/hello',   name: 'Hello',   // component: Hello   component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo') }

以上就是本次介绍的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JS出现失效的情况总结
Jan 20 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
Nuxt使用Vuex的方法示例
Sep 06 #Javascript
vue中input的v-model清空操作
Sep 06 #Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 #Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 #Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
深入解析php中的foreach函数
2013/08/31 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
学习python分支结构
2019/05/17 Python
解决yum对python依赖版本问题
2019/07/05 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Python的两道面试题
2013/06/29 面试题
称象教学反思
2014/02/03 职场文书
公司贷款承诺书
2014/05/30 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
Redis数据同步之redis shake的实现方法
2022/04/21 Redis