Vite中import.meta.glob导入动态图片后打包体积过大问题咨询

核心问题分析 #

你当前的写法会让Vite在编译时静态扫描所有匹配../scheme/public/**/*的图片资源，哪怕你在运行时通过import.meta.env.VITE_VARIABLES筛选，编译阶段已经把所有符合规则的资源都打包进产物了，这就是index.html体积超标的原因。另外import.meta.glob不支持运行时动态变量，必须在编译时确定匹配路径。

具体解决方案 #

1. 编译时用环境变量缩小glob匹配范围（最优方案）

Vite会在编译时替换import.meta.env中的变量，直接把环境变量嵌入glob路径模板字符串里，让Vite只扫描目标目录下的资源：

// 编译时Vite会把VITE_VARIABLES替换为实际值，只扫描对应目录的图片
const imagesNames = import.meta.glob(`../scheme/public/${import.meta.env.VITE_VARIABLES}/**/*.{png,jpg,jpeg,svg}`, { as: 'url' })

// 后续逻辑简化，无需再筛选，因为glob已经只匹配目标目录
for (const key in imagesNames) {
  imagesNames[key]().then(mod => {
    images.value[key.substring(key.lastIndexOf('/') + 1)] = mod
  })
}

注意：VITE_VARIABLES必须在编译时就能确定值（比如在.env文件配置，或打包时通过VITE_VARIABLES=xxx npm run build命令行传入）。

2. 纯运行时动态目录：改用后端接口+动态加载

如果文件夹名称完全是运行时才确定的（无法在编译时获知），放弃import.meta.glob，通过后端接口获取目标目录的图片列表，再动态加载：

// 假设后端提供接口返回目标文件夹下的图片文件名数组
fetch(`/api/get-image-list?folder=${import.meta.env.VITE_VARIABLES}`)
  .then(res => res.json())
  .then(filenames => {
    filenames.forEach(name => {
      // 直接拼接静态资源URL，按需加载
      images.value[name] = `/scheme/public/${import.meta.env.VITE_VARIABLES}/${name}`
    })
  })

这种方式下，Vite不会提前打包所有图片，只会在用户访问时加载对应资源，彻底避免冗余打包。

3. 折中方案：预定义可能的文件夹范围

如果文件夹是有限个可选值，不想写switch case，可以用glob数组批量匹配，再筛选目标目录：

// 预定义所有可能的文件夹（可从配置文件读取）
const possibleFolders = ['theme-red', 'theme-blue', 'theme-green']
const globPatterns = possibleFolders.map(folder => 
  `../scheme/public/${folder}/**/*.{png,jpg,jpeg,svg}`
)

const imagesNames = import.meta.glob(globPatterns, { as: 'url' })

// 后续筛选逻辑不变，但打包体积已被限制在预定义文件夹内
for (const key in imagesNames) {
  if (key.includes(import.meta.env.VITE_VARIABLES)) {
    imagesNames[key]().then(mod => {
      images.value[key.substring(key.lastIndexOf('/') + 1)] = mod
    })
  }
}

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