最近了解到require.context自動化引入,使用過程中發現了其有兩懶加載參數,lazy與lazy-once,看了看文檔的資料,感覺有點云里霧里,不是很明白兩者間的區別,打算自己嘗試一下lazy
const modules = [];
const files = require.context("../views", true, /\.vue$/,'lazy');
files.keys().forEach((item) => {
const name = item.split("/")[1];
modules.push({
path: `/${name}`,
name,
component: files(item).default,
})
});
console.log(modules)
Vue.use(VueRouter)
const routes = [
{path:'/',redirect: '/home',},
...modules
]
路由組件如上寫,沒有問題
但在公共的一個大組件中引入很多小組件使用這種方式的話,不能加‘lazy’
const modules = {};
const files = require.context("../control", true, /\.vue$/);
files.keys().forEach((item) => {
const name = item.split("/")[1];
modules[`her-${name}`] = files(item).default;
});
//加上“lazy”返回的是一個Promise對象了,
const modules = {};
const files = require.context("../control", true, /\.vue$/,'lazy');
files.keys().forEach(async(item) => {
let com = await files(item)
console.log(item,com,com.default)
const name = item.split("/")[1];
modules[`her-${name}`] = com.default;
});
此時頁面會報錯,無奈了,不知道什么原因
require.context中開啟按需加載,首先攜帶'lazy',
提供一個返回 Promise 的函數,
最后在vue注冊組件時,直接提供引用地址 components:modules