實現(xiàn)vue路由懶加載的幾種方式
[1]const home = r => require.ensure([], () => r(require('../home')), 'home')
webpack 1.X 用的多
[2]. const Hello = ()=> import('./hello')
webpack>2.4
注意當(dāng)調(diào)用 ES6 模塊的 import() 方法(引入模塊)時纤掸,必須指向模塊的 .default 值坷备,因為它才是 promise 被處理后返回的實際的 module 對象
需要配合babel的syntax-dynamic-import插件
這是vue-router 官方文檔提供的方法
查詢資料時發(fā)現(xiàn)众旗,這種寫法如果項目有幾十個頁面乾吻,頁面熱更新速度慢伶选。
可以使用babel
的 plugins
babel-plugin-dynamic-import-node屉符。
它只做一件事就是將所有的import()轉(zhuǎn)化為require()奇徒,這樣就可以用這個插件將所有異步組件都用同步的方式引入
[3].resolve => require(['../components/PromiseDemo'], resolve)
CommonJS AMD風(fēng)格的require
分割層級
Vue代碼分割懶加載包含如下幾個層級:
1肄鸽、 組件層級分割懶加載
2、 router路由層級(常用)
3警医、 Vuex 模塊