vue+webpack实现异步组件加载的方法


Posted in Javascript onFebruary 03, 2018

8.9更新:之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来,所以跑去博客园了,今天发现csdn已经帮我把文章搬过来,有必要修正一下这篇文章。

写这篇文章的时候因为刚接触vue,所以捣鼓的时候有些迷糊。

----------------/*以下可以跳过*/-----------------

本来很简单的事情折腾好久。

1.vue文档只给出了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子,但现在习惯.vue文件写组件,在点击路由获取.vue的时候怎么弄呢?

2.webpack的coding-split支持commonjs/amd语法,即有不同的实现。网上查了n多案例乱七八糟的,最后确定两种写法

commonjs语法:const setting = resolve => require.ensure([], ()=> resolve(require('./components/setting.vue')),'setting');

文档的写法:resolve =>require(['./components/setting.vue')],resolve);//懒加载

当时我是结合了路由一起练习,用的第一种,在github上看到的,require.ensure是webpack的语法,在打包的时候将require.ensure部分指定的代码切割出来打包在另一个chunk上,webpack.config.js里面加上chunkFileName项即可。require.ensure的三个参数分别是:依赖的url,回调,自定义的chunk的名字。

其实,code split本质上就是,将你require的模块单独出来另外打包,等用到的时候再由浏览器发起异步获取,并通过scriptdom的形式插入到head中,这是它的底层实现。我自己尝试的时候,每获取一次异步组件,head中都会插入两个标签,一个script,yigestyle,因为.vue文件最终会解析成html,css和js。

PS:其实webpack官网的示例代码并没有resolve=>这种写法,直接在函数里require.ensure就是了,一开始有点疑惑,网上找不到讲解,自己研究发现require.ensure这个函数,webpack打包编译之后

是一个_webpack_require_.e的函数,其本身是一个一个thenable实例,require.ensure的回调放到_webpack_require_.e.then(fn)里面,这下子就很明显了,webpack的这个语法本身应该是一个promise实例,只是上面获取vue组件的写法里,因为require.ensure是封装好的语法,只好把resolve传入其父函数中,在require.ensure的回调里通过作用域链获取并调用。这也揭露了,resolve函数不一定要在promise的函数参数中,其出现位置可以灵活设置,在阮一峰老师的ES6入门里提到过,resolve函数是js引擎能提供的,不需要自己部署。

------------------/*以上可跳过*/------------------

首先,异步组件的使用没刚接触时以为的那么复杂。

1.如果套用官网的方式是可以的:

HTML:

<input type="button" @click="showchild" value="show"> //点击按钮后,show为真,先获取child组件,再渲染div内容
<div id="contain" v-if="show">
 <child></child>
 </div>

JS:

//...
data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   show:false
  }
 },
 methods: {
  showchild:function(){
   this.show=true;
   }
 },
 components: {
   'child': function(resolve) {
    require(['./components/child.vue'], resolve);
 }

*注意:加载异步组件的时候,组件名后边的.vue不要忽略。

这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真,由于child.vue是异步组件,所以会先ajax获取组件然后渲染。

在很多情况下异步组件会配合vue-router使用来切换视图,其实这时候用哪种语法的都可以。

vue+webpack实现异步组件加载的方法

以上这篇vue+webpack实现异步组件加载的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 #Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 #Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 #Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 #Javascript
JavaScript实现求最大公共子串的方法
Feb 03 #Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 #Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 #Javascript
You might like
php 正则表达式小结
2009/08/31 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对python周期性定时器的示例详解
2019/02/19 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
python 经典数字滤波实例
2019/12/16 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
会计实习自我鉴定
2013/12/04 职场文书
运动会领导邀请函
2014/01/10 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
工程安全员岗位职责
2014/03/09 职场文书
阅兵口号
2014/06/19 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
学术会议通知范文
2015/04/15 职场文书
2016年情人节广告语
2016/01/28 职场文书