vue+webpack實現異步組件加載的方法

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實現異步組件加載的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。