vue+webpack實(shí)現(xiàn)異步組件加載的方法

更新時(shí)間：2018年02月03日 15:35:24 作者：weixin_36094484

下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

8.9更新：之前想搬遷到csdn的時(shí)候由于邀請(qǐng)碼問題遲遲沒把博客轉(zhuǎn)過來，所以跑去博客園了，今天發(fā)現(xiàn)csdn已經(jīng)幫我把文章搬過來，有必要修正一下這篇文章。

寫這篇文章的時(shí)候因?yàn)閯偨佑|vue，所以搗鼓的時(shí)候有些迷糊。

----------------/*以下可以跳過*/-----------------

本來很簡(jiǎn)單的事情折騰好久。

1.vue文檔只給出了Vue.component('comp_name',function(resolve,reject){})在回調(diào)里ajax加載組件定義內(nèi)容的例子，但現(xiàn)在習(xí)慣.vue文件寫組件，在點(diǎn)擊路由獲取.vue的時(shí)候怎么弄呢？

2.webpack的coding-split支持commonjs/amd語法，即有不同的實(shí)現(xiàn)。網(wǎng)上查了n多案例亂七八糟的，最后確定兩種寫法

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

文檔的寫法：resolve =>require(['./components/setting.vue')],resolve);//懶加載

當(dāng)時(shí)我是結(jié)合了路由一起練習(xí)，用的第一種，在github上看到的，require.ensure是webpack的語法，在打包的時(shí)候?qū)equire.ensure部分指定的代碼切割出來打包在另一個(gè)chunk上，webpack.config.js里面加上chunkFileName項(xiàng)即可。require.ensure的三個(gè)參數(shù)分別是：依賴的url，回調(diào)，自定義的chunk的名字。

其實(shí)，code split本質(zhì)上就是，將你require的模塊單獨(dú)出來另外打包，等用到的時(shí)候再由瀏覽器發(fā)起異步獲取，并通過scriptdom的形式插入到head中，這是它的底層實(shí)現(xiàn)。我自己嘗試的時(shí)候，每獲取一次異步組件，head中都會(huì)插入兩個(gè)標(biāo)簽，一個(gè)script,yigestyle,因?yàn)?vue文件最終會(huì)解析成html,css和js。

PS：其實(shí)webpack官網(wǎng)的示例代碼并沒有resolve=>這種寫法，直接在函數(shù)里require.ensure就是了，一開始有點(diǎn)疑惑，網(wǎng)上找不到講解，自己研究發(fā)現(xiàn)require.ensure這個(gè)函數(shù)，webpack打包編譯之后

是一個(gè)_webpack_require_.e的函數(shù)，其本身是一個(gè)一個(gè)thenable實(shí)例，require.ensure的回調(diào)放到_webpack_require_.e.then(fn)里面，這下子就很明顯了，webpack的這個(gè)語法本身應(yīng)該是一個(gè)promise實(shí)例，只是上面獲取vue組件的寫法里，因?yàn)閞equire.ensure是封裝好的語法，只好把resolve傳入其父函數(shù)中，在require.ensure的回調(diào)里通過作用域鏈獲取并調(diào)用。這也揭露了，resolve函數(shù)不一定要在promise的函數(shù)參數(shù)中，其出現(xiàn)位置可以靈活設(shè)置，在阮一峰老師的ES6入門里提到過，resolve函數(shù)是js引擎能提供的，不需要自己部署。

------------------/*以上可跳過*/------------------

首先，異步組件的使用沒剛接觸時(shí)以為的那么復(fù)雜。

1.如果套用官網(wǎng)的方式是可以的：

HTML：

<input type="button" @click="showchild" value="show"> //點(diǎn)擊按鈕后，show為真,先獲取child組件，再渲染div內(nèi)容
<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);
 }

*注意：加載異步組件的時(shí)候，組件名后邊的.vue不要忽略。

這個(gè)例子應(yīng)該比較直觀了。點(diǎn)擊按鈕之后改變了變量show的布爾值為真，由于child.vue是異步組件，所以會(huì)先ajax獲取組件然后渲染。

在很多情況下異步組件會(huì)配合vue-router使用來切換視圖，其實(shí)這時(shí)候用哪種語法的都可以。