1. 程式人生 > >vue+webpack實現非同步元件載入

vue+webpack實現非同步元件載入

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引擎能提供的,不需要自己部署。

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