一、Vite 核心原理

1. Vite 為什么比 Webpack 快？

答案：
Vite 的核心優勢在于開發環境和生產環境的雙重優化：

• 開發環境：
  • 基于原生 ESM（ES Modules）：瀏覽器直接加載 ES 模塊，無需打包，啟動時間極短（毫秒級）。
  • 按需編譯：僅編譯當前頁面所需的模塊，而非整個項目。
  • 預構建依賴：使用 esbuild 對 node_modules 進行預編譯（比 Babel 快 10-100 倍）。
• 生產環境：
  • 使用 Rollup 進行打包，輸出更優化、更精簡的代碼。

對比 Webpack：

特性	Vite	Webpack
啟動	毫秒級（按需編譯）	秒級（全量打包）
HMR	極快（基于 ESM）	較慢（依賴重建依賴圖）
構建	Rollup（高效 Tree Shaking）	自研打包機制

---

2. Vite 的熱更新（HMR）是如何工作的？

答案：
Vite 的 HMR（Hot Module Replacement）實現機制：

1. 基于 WebSocket：Vite 服務器與瀏覽器建立長連接，監聽文件變化。
2. 精準更新：僅重新編譯修改的文件，并通過 ESM 動態替換。
3. Vue/React 深度優化：
   • Vue：單文件組件（SFC）可單獨更新 <template>、<script> 或 <style>。
   • React：支持 Fast Refresh，保持組件狀態。

代碼示例（手動 HMR API）：

if (import.meta.hot) {import.meta.hot.accept('./module.js', (newModule) => {console.log('模塊更新:', newModule);});
}

---

二、Vite 配置與優化

1. 如何配置多環境變量？

答案：
Vite 使用 .env 文件管理環境變量：

.env            # 全局默認
.env.development # 開發環境
.env.production  # 生產環境

配置方式：

// vite.config.js
import { defineConfig, loadEnv } from 'vite';export default defineConfig((