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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
js实现翻牌小游戏
Jul 31 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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 parse_url 一个好用的函数
2009/10/03 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php创建多级目录的方法
2015/03/24 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python实现学生成绩测评系统
2020/06/22 Python
Python LMDB库的使用示例
2021/02/14 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
《社戏》教学反思
2014/04/15 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
60句有关成长的名言
2019/09/04 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Nginx速查手册及常见问题
2022/04/07 Servers