如何在Vite中通过字符串路径动态懒加载React组件

现有一段用于获取指定目录下所有名称以View结尾的React组件路径映射的代码：

const loadViews = () => {
  const paths = import.meta.glob(`./views/*.*`, { eager: true });
  const matchingPattern = /\/views\/(.+?View).tsx/;
  const viewMap = Object.keys(paths).reduce((acc: any, current: any) => {
    const match = current.match(matchingPattern);
    return match ? acc.set(match[1], match[0]) : acc;
  }, new Map());

  return viewMap;
};

目前已实现组件名称到组件路径的映射，但尝试通过带{eager: true}的import.meta.glob实现动态懒加载时，发现Vite不支持在此场景使用变量，求可行替代方案。

方案1：直接用import.meta.glob批量生成懒加载函数 #

Vite的import.meta.glob支持直接返回懒加载函数，无需eager: true，可以通过静态匹配规则提前锁定目标文件，再构建映射表：

const loadViews = () => {
  // 静态匹配所有以View结尾的tsx文件，返回懒加载函数
  const viewModules = import.meta.glob(`./views/*View.tsx`);
  const viewMap = new Map();

  for (const [path, loader] of Object.entries(viewModules)) {
    // 提取组件名称（如从./views/TableView.tsx中得到TableView）
    const match = path.match(/\/views\/(.+View)\.tsx/);
    if (match) {
      viewMap.set(match[1], loader);
    }
  }

  return viewMap;
};

// 使用示例：按需加载组件
// const TableView = await viewMap.get('TableView')();

这个方案利用Vite的静态glob匹配语法，直接生成对应文件的懒加载函数，调用时才会加载组件，完全符合懒加载需求。

方案2：基于静态路径生成动态导入函数 #

如果需要更灵活的匹配逻辑，可以先通过import.meta.glob获取所有目标文件的静态路径，再基于这些路径创建懒加载函数：

const loadViews = () => {
  // 获取views下所有tsx文件的静态路径（不立即加载）
  const allPaths = import.meta.glob(`./views/*.tsx`, { eager: false, as: 'raw' });
  const matchingPattern = /\/views\/(.+?View)\.tsx/;
  const viewMap = new Map();

  for (const path of Object.keys(allPaths)) {
    const match = path.match(matchingPattern);
    if (match) {
      // 基于静态路径创建懒加载函数，Vite能正确识别并处理
      viewMap.set(match[1], () => import(path));
    }
  }

  return viewMap;
};

这里的path是Vite静态分析得到的固定值，所以import(path)可以被正确处理，既保留了灵活的匹配逻辑，又实现了懒加载。

方案3：预加载组件模拟懒加载接口（仅适合小体量场景） #

如果需要保留类似eager: true的预加载特性，但对外暴露懒加载接口，可以用以下方式，但本质是提前加载所有组件，仅推荐组件数量较少的场景：

const loadViews = () => {
  const eagerModules = import.meta.globEager(`./views/*View.tsx`);
  const viewMap = new Map();

  for (const [path, module] of Object.entries(eagerModules)) {
    const match = path.match(/\/views\/(.+View)\.tsx/);
    if (match) {
      // 返回立即resolve的Promise，统一懒加载接口格式
      viewMap.set(match[1], () => Promise.resolve(module.default));
    }
  }

  return viewMap;
};

内容的提问来源于stack exchange，提问作者Dale