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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
js获取ajax返回值代码
Apr 30 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
JS 实现分页打印功能
May 16 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
详解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
php 接口类与抽象类的实际作用
2009/11/26 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
js闭包的用途详解
2014/11/09 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python微信公众号开发简单流程
2018/03/23 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python FFT合成波形的实例
2019/12/04 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python中pop()函数的语法与实例
2020/12/01 Python
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
经典洗发水广告词
2014/03/13 职场文书
静心口服夜广告词
2014/03/20 职场文书
共产党员公开承诺书
2014/03/25 职场文书
公司投资建议书
2014/05/16 职场文书
婚礼秀策划方案
2014/05/19 职场文书
个人委托书范本
2014/09/13 职场文书
小学生家长意见
2015/06/03 职场文书
golang import自定义包方式
2021/04/29 Golang
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫