require.context中开启按需加载

Question

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

此时页面会报错，无奈了，不知道什么原因

Answer 1

lazy 延迟加载会分离出单独的 chunk 文件

lazy-once 延迟加载会分离出单独的 chunk 文件，加载过下次再加载直接读取内存里的代码。