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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
详解php中反射的应用
2016/03/15 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
json字符串对象转换代码实例
2019/09/28 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
中学教师培训制度
2014/01/31 职场文书
竞选班委演讲稿
2014/04/28 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python