一、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-switchv-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>