1. 程式人生 > >vue-router懶載入

vue-router懶載入

require.ensure(dependencies:String [],callback:function(require),errorCallback:function(error),chunkName:String)

require.ensure()接受三個引數:

第一個引數的依賴關係是一個數組,代表了當前需要進來的模組的一些依賴
。第二個引數回撥就是一個回撥函式其中需要注意的是,這個回撥函式有一個引數要求,通過這個要求就可以在回撥函式內動態引入其他模組值得注意的是,雖然這個要求是回撥函式的引數,理論上可以換其他名稱,但是實際上是不能換的,否則的的的的WebPack就無法靜態分析的時候處理它; 


第三個引數errorCallback比較好理解,就是處理錯誤的回撥; 
第四個引數chunkName則是指定打包的組塊名稱。

require.ensure()實現

const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')
const msite = r => require.ensure([], () => r(require('../page/msite/msite')), 'msite')
const search = r => require.ensure([], () => r(require('../page/search/search')), 'search')

 

import()實現

const home = () => import(/* webpackChunkName: "home" */ '../page/home/home')