Vite动态导入静态资源与自动依赖发现过程
作者：斯~内克
文章主要介绍了在Vite中动态导入静态资源的三种方案,并讨论了Vite自动依赖发现的条件,文章还提供了一些代码示例和优化建议,以帮助开发者更高效地管理动态资源和依赖预构建
一、Vite 动态导入静态资源
在 Vite 中，动态加载图片、JSON 等静态资源是高频需求，但动态路径拼接可能导致构建失败或资源未识别。
以下结合示例代码，分析三种实现方案：
1. 方案一：new URL 动态路径转换
通过 new URL 拼接路径，Vite 自动处理资源引用：
const pathKey = `../assets/${val}.jpg`;
const src = new URL(pathKey, import.meta.url);
imgSrc.value = src.href;
原理与限制：
- Vite 会将路径转换为构建后的哈希 URL（如
_assets/1-abc123.jpg）。 - 限制：路径必须为静态字符串模板（如
`../assets/${val}.jpg`），不可使用完全动态变量（如pathKey = '../assets/' + val + '.jpg'），否则构建时无法解析。
2. 方案二：import() 动态导入
使用 import() 语法按需加载资源：
import(`../assets/${val}.jpg`).then((res) => {
imgSrc.value = res.default;
});
特性：
- 构建时，Vite 会分析
../assets/下的所有.jpg文件，生成对应 chunk。 - 问题：若
val的取值在构建时无法确定（如用户输入），可能导致资源缺失。
3. 方案三：import.meta.glob 批量预加载
通过 Glob 模式预加载所有匹配资源，运行时按需获取：
// 预加载所有 jpg 文件（构建时生成映射表）
const srcs = import.meta.glob("../assets/*.jpg", { as: "url" });
// 运行时动态获取
const pathKey = `../assets/${val}.jpg`;
const url = await srcs[pathKey]();
imgSrc.value = url;
优势：
- 构建时生成所有资源的 URL 映射表，避免运行时路径不确定性。
{ as: 'url' }表示直接返回资源 URL，无需手动处理default属性。
二、代码示例的问题与优化
1. 路径严格匹配问题
示例代码中，pathKey 必须与 Glob 生成的键完全一致（如 ../assets/2.jpg）。若文件名含动态前缀（如时间戳），需调整 Glob 模式：
// 松散匹配文件名中的数字
const srcs = import.meta.glob("../assets/[0-9].jpg", { as: "url" });
2. 资源未找到的兜底处理
通过 try/catch 或条件判断增强健壮性：
try {
const url = await srcs[pathKey]();
imgSrc.value = url;
} catch {
imgSrc.value = fallbackImage; // 加载默认图
}
三、Vite 自动依赖发现的条件
Vite 的依赖预构建（Pre-Bundling）是性能优化的核心，其触发条件如下：
1. 依赖类型识别
- CommonJS 模块：若
node_modules中的依赖未提供 ESM 格式，Vite 自动预构建。 - 嵌套依赖：若依赖内部引用了其他 CJS 模块（如
lodash的子包），触发预构建。 - 非优化入口：依赖的
package.json未指定module或exports字段。
2. 代码中的导入方式
- 静态导入：
import axios from 'axios'会被自动分析。 - 动态导入：
import('lodash')若路径为字符串字面量，触发预构建。 - 完全动态路径：
import(someVar)不会触发预构建，可能导致运行时加载问题。
3. 配置干预
在 vite.config.js 中手动控制依赖：
export default {
optimizeDeps: {
include: ['lodash/debounce'], // 强制预构建特定子模块
exclude: ['jquery'], // 排除无需预构建的库
},
}
四、实战：动态资源与依赖预构建的联动问题
场景：动态加载第三方图标库
假设项目中按需加载 @ant-design/icons 的图标：
const loadIcon = async (name) => {
const icon = await import(`@ant-design/icons/${name}.js`);
return icon;
};
问题：Vite 默认不会预构建 @ant-design/icons 的子模块，导致运行时加载延迟。
解决方案：
在配置中显式声明需要预构建的子模块：
// vite.config.js
export default {
optimizeDeps: {
include: ['@ant-design/icons/HomeOutlined'],
},
}
五、总结与最佳实践
1. 动态资源加载
- 优先使用
import.meta.glob：提前声明资源范围，避免路径不确定性。 - 统一资源目录：如将所有动态图片放在
src/assets/dynamic/下，通过 Glob 简化匹配。 - 处理未找到资源：添加日志与兜底逻辑，提升用户体验。
2. 依赖预构建优化
- 监控控制台输出：运行
vite build时，检查哪些依赖被自动预构建。 - 按需手动包含：对大型库的子模块（如
lodash、antd），通过include减少构建体积。 - 慎用
exclude：除非明确知晓依赖的模块格式，否则避免盲目排除。
3. 调试工具推荐
- 构建分析：使用
rollup-plugin-visualizer查看产物结构。 - 依赖检查：运行
npx vite deps查看预构建的依赖列表。
通过上述实践，开发者可以高效管理 Vite 中的动态资源，同时精准控制依赖预构建策略，实现性能与可维护性的最佳平衡。
<template>
<div>
<el-switch
v-model="value"
:active-value="2"
:inactive-value="1"
active-color="#13ce66"
inactive-color="#ff4949"
@change="handleChange"
>
</el-switch>
<img :src="imgSrc" alt="" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// import a from "../assets/1.jpg";
// console.log("a", a);
const value = ref(1);
const imgSrc = ref("");
const handleChange = async (val: any) => {
console.log(val);
// const src = new URL(`../assets/${val}.jpg`, import.meta.url);
// console.log("src", src);
// imgSrc.value = src.href;
// import("../assets/" + val + ".jpg").then((res) => {
// console.log("res", res);
// imgSrc.value = res.default;
// });
const srcs = import.meta.glob("../assets/*.jpg", { as: "url" });
console.log("srcs", srcs);
// 构建对应的路径 key（注意文件名匹配要完全一致）
const pathKey = `../assets/${val}.jpg`;
try {
const url = await srcs[pathKey]();
imgSrc.value = url;
} catch {
imgSrc.value = ""; // 加载默认图
}
};
</script>
<style lang="scss" scoped>
img {
width: 1200px;
height: 600px;
}
</style>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。