vite常见面试问题

一、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(({
    
     mode }