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 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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 已经成熟
2006/12/04 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php表单处理操作
2017/11/16 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
小程序实现投票进度条
2019/11/20 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
python实现的各种排序算法代码
2013/03/04 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python中的变量如何开辟内存
2018/06/26 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python scipy卷积运算的实现方法
2019/09/16 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
如何在Shell脚本中使用函数
2015/09/06 面试题
大学生毕业求职自荐书范文
2014/02/04 职场文书
《都江堰》教学反思
2014/02/07 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
文艺晚会开场白
2015/05/29 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书