Vue+webpack實現(xiàn)懶加載過程解析

發(fā)布時間：2020-09-13 16:18:03 來源：腳本之家閱讀：205 作者：歡樂之家欄目：web開發(fā)

這篇文章主要介紹了Vue+webpack實現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

實現(xiàn)方式：

1、webpack method

　　require.ensure([''], callback, chunkName) ;

2、es6 motehod

　　import()

　　import().then()

　　import(/* webpackChunkName: async-chunk-name */ /* webpackMode: lazy */ modulename)

　　需要安裝bable插件 syntax-dynamic-import，因為import只能出現(xiàn)在頁面頂部

具體實現(xiàn)：

第一種、

var component = (resolve) => {
  import(/* webpackChunkName:'vendor'*/'組件路徑').then(module => {
    resolve(module)
  })   
}

第二種、

var component = (resolve) => {
  require(['組件路徑'], resolve) 
}

第三種、

var component = (resolve) => {
 require.ensure([], () =>{
    resolve(reauire('組件路徑'));
  }, chunkName)
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

猜你喜歡