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

来源：懂视网责编：小采时间：2020-11-27 22:20:14

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

vue+webpack实现异步组件加载的方法:8.9更新：之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来，所以跑去博客园了，今天发现csdn已经帮我把文章搬过来，有必要修正一下这篇文章。写这篇文章的时候因为刚接触vue，所以捣鼓的时候有些迷糊。 ----------------/*以下可以跳过*/-

推荐度：

点击下载本文 文档为doc格式

导读vue+webpack实现异步组件加载的方法:8.9更新：之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来，所以跑去博客园了，今天发现csdn已经帮我把文章搬过来，有必要修正一下这篇文章。写这篇文章的时候因为刚接触vue，所以捣鼓的时候有些迷糊。 ----------------/*以下可以跳过*/-

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使用来切换视图，其实这时候用哪种语法的都可以。