Vue+webpack实现懒加载过程解析


Posted in Javascript onFebruary 17, 2020

这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

实现方式:

1、webpack method

require.ensure([''], callback, chunkName) ;

2、es6 motehod

import()

import().then()

import(/* webpackChunkName: async-chunk-name */ /* webpackMode: lazy */ modulename)

需要安装bable插件 syntax-dynamic-import,因为import只能出现在页面顶部

具体实现:

第一种、

var component = (resolve) => {
  import(/* webpackChunkName:'vendor'*/'组件路径').then(module => {
    resolve(module)
  })   
}

第二种、

var component = (resolve) => {
  require(['组件路径'], resolve) 
}

第三种、

var component = (resolve) => {
 require.ensure([], () =>{
    resolve(reauire('组件路径'));
  }, chunkName)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
javascript实现行拖动的方法
May 27 Javascript
js严格模式总结(分享)
Aug 22 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
javascript History对象原理解析
Feb 17 #Javascript
Vue中fragment.js使用方法小结
Feb 17 #Javascript
javascript实现倒计时效果
Feb 17 #Javascript
JavaScript将数组转换为链表的方法
Feb 16 #Javascript
javascript canvas API内容整理
Feb 16 #Javascript
vue props 单项数据流实例分享
Feb 16 #Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 #Javascript
You might like
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP输出时间差函数代码
2013/01/28 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
信息部岗位职责
2013/11/12 职场文书
项目负责人任命书
2014/06/04 职场文书
工作收入住址证明
2014/10/28 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
邹越演讲观后感
2015/06/15 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers