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

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

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

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

寫這篇文章的時候因為剛接觸vue，所以搗鼓的時候有些迷糊。

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

本來很簡單的事情折騰好久。

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

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

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

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

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

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

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

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

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

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

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

HTML：

<input type="button" @click="showchild" value="show"> //點擊按鈕后，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);
 }

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

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

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