require.context中開啟按需加載

最近了解到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;
  });

此時頁面會報錯，無奈了，不知道什么原因