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为iframe的body添加click事件的实现代码
Apr 07 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
Jquery 效果使用详解
Nov 23 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
深度解读vue-resize的具体用法
Jul 08 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 删除cookie方法详解
2014/12/01 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
php中的依赖注入实例详解
2019/08/14 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python实现的rsa加密算法详解
2018/01/24 Python
django基础学习之send_mail功能
2019/08/07 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
什么叫做SQL注入,如何防止
2016/10/04 面试题
组织关系转移介绍信
2014/01/16 职场文书
企业总经理岗位职责
2014/02/13 职场文书
文体活动总结范文
2014/05/05 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
大学生逃课检讨书
2015/05/04 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
课改心得体会范文
2016/01/25 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang