面试题手册

Vite 与 Webpack 是两种不同的前端构建工具，它们在设计理念、工作原理和性能表现上都有显著差异：核心设计理念：Vite：基于浏览器原生 ES 模块（ESM）开发环境无需打包，直接按需加载利用 esbuild 进行依赖预构建生产环境使用 Rollup 打包Webpack：基于打包（bundling）理念开发和生产环境都需要打包使用 JavaScript 编写，速度相对较慢自身的模块系统（webpack module system）启动速度对比：Vite：冷启动时间：几百毫秒使用 esbuild 预构建依赖，速度极快启动速度与项目规模基本无关Webpack：冷启动时间：几秒到几十秒需要构建整个依赖图项目越大，启动越慢热更新（HMR）性能：Vite：只编译修改的文件HMR 更新速度与项目规模无关几十毫秒内完成更新Webpack：需要重新编译相关模块大型项目中 HMR 性能明显下降可能需要几秒钟完成更新开发体验：Vite：开箱即用，配置简单原生 ESM 支持，调试方便更快的反馈循环Webpack：配置复杂，学习曲线陡峭需要配置 loader 和 plugin反馈循环较慢生产构建：Vite：使用 Rollup，优化能力强自动代码分割、tree-shaking输出优化良好Webpack：成熟的打包优化丰富的插件生态可配置性强生态系统：Vite：相对较新，生态正在快速发展官方插件丰富兼容 Rollup 插件Webpack：生态成熟，插件丰富社区支持广泛大量现有项目使用适用场景：Vite 适合：新项目，特别是使用现代框架（Vue 3、React、Svelte）需要快速开发体验中小型项目Webpack 适合：大型复杂项目需要高度自定义配置现有 Webpack 项目迁移成本高迁移建议：新项目优先选择 Vite现有 Webpack 项目可以逐步迁移复杂的 Webpack 配置可能需要重构

Vite 在开发环境中使用原生 ES 模块（ESM）加载资源，在生产环境中通过 Rollup 打包优化。以下是 Vite 处理静态资源的详细机制：开发环境：直接加载：静态资源通过 HTTP 请求直接加载，无需打包资源引用：通过 ?url、?raw、?inline 等后缀控制资源加载方式CSS 处理：CSS 文件通过 <style> 标签注入，支持 CSS Modules 和预处理器图片处理：图片等资源返回 URL，浏览器直接请求生产环境：资源打包：静态资源被打包到输出目录文件命名：使用 hash 命名（如 logo.abc123.png）实现长期缓存资源引用：代码中的资源引用被替换为打包后的路径代码分割：动态导入的资源会被分割成独立的 chunk资源类型处理：图片资源：小于 4KB 的图片默认转为 base64 内联大图片作为独立文件输出支持常见格式：png、jpg、jpeg、gif、svg、webpCSS 资源：支持 CSS、SCSS、SASS、LESS、Stylus 等预处理器支持 CSS Modules自动提取 CSS 到独立文件JSON 资源：可以直接导入 JSON 文件支持按需导入：import { field } from './data.json'其他资源：Worker 文件：通过 ?worker 后缀导入WebAssembly：通过 ?wasm 后缀导入字体文件：直接引用资源引用方式：// 默认：返回 URLimport logo from './logo.png'// ?raw：返回字符串内容import content from './file.txt?raw'// ?url：显式返回 URLimport logoUrl from './logo.png?url'// ?inline：内联为 base64import logoInline from './logo.png?inline'配置选项：export default { build: { assetsInlineLimit: 4096, // 内联阈值（字节） rollupOptions: { output: { assetFileNames: 'assets/[name]-[hash][extname]' } } }, assetsInclude: ['**/*.glb'] // 自定义资源类型}最佳实践：将静态资源放在 public 目录，会被直接复制到输出目录使用适当的资源格式（如 WebP 图片）配置合理的内联阈值使用 CDN 加速静态资源加载

Vite 在开发环境和生产环境使用不同的构建策略，这是为了在两个场景下都能提供最佳的性能和体验：开发环境：使用 esbuild 进行依赖预构建，esbuild 是用 Go 语言编写的，速度极快直接利用浏览器原生 ES 模块（ESM）加载源代码，无需打包通过 HTTP 服务器提供文件，浏览器按需请求模块支持快速的热模块替换（HMR），只编译修改的文件提供源码映射（Source Map）用于调试生产环境：使用 Rollup 进行打包和优化执行代码分割（Code Splitting），将代码拆分成多个 chunk进行 tree-shaking，移除未使用的代码压缩和混淆代码，减小文件体积生成优化的静态资源，包括 CSS 提取和压缩生成 hash 文件名用于长期缓存为什么使用不同策略：性能优化：开发环境需要快速启动和响应，生产环境需要优化加载速度和运行性能功能需求：开发环境需要调试功能和 HMR，生产环境需要优化和压缩兼容性：生产环境需要考虑浏览器兼容性，可能需要转译和 polyfill构建工具特性：esbuild：启动快，但优化功能不如 Rollup 完善Rollup：打包优化能力强，但启动速度较慢配置差异：开发环境：vite 命令启动开发服务器生产环境：vite build 命令构建生产版本，vite preview 预览构建结果这种双模式设计让 Vite 在开发体验和生产性能之间达到了最佳平衡。

Vite 提供了丰富的插件系统，开发者可以通过插件扩展 Vite 的功能。以下是 Vite 插件开发的关键点：插件基本结构：Vite 插件是一个对象，包含 name 属性和各种钩子函数：export default function myPlugin() { return { name: 'my-plugin', // 钩子函数 config(config) { // 修改配置 }, resolveId(source) { // 解析模块 ID }, load(id) { // 加载模块内容 }, transform(code, id) { // 转换代码 } }}常用钩子函数：config：修改 Vite 配置，在配置解析后调用configResolved：配置解析完成后调用configureServer：配置开发服务器，可以添加中间件resolveId：自定义模块解析逻辑load：自定义模块加载逻辑transform：转换代码内容（最常用）buildStart/buildEnd：构建开始/结束时调用generateBundle：生成 bundle 时调用Rollup 插件兼容性：Vite 插件与 Rollup 插件兼容，大部分 Rollup 插件可以直接在 Vite 中使用。但需要注意：Vite 插件在开发环境和生产环境都运行某些 Rollup 特定钩子只在生产环境生效开发环境特有钩子：handleHotUpdate：自定义 HMR 更新逻辑configureServer：配置开发服务器transformIndexHtml：转换 HTML 文件插件示例：export default function myTransformPlugin() { return { name: 'my-transform', transform(code, id) { if (id.endsWith('.js')) { return code.replace(/foo/g, 'bar') } } }}插件配置：在 vite.config.js 中使用插件：import myPlugin from './my-plugin'export default { plugins: [myPlugin()]}最佳实践：插件应该有清晰的命名和文档使用 enforce 选项控制插件执行顺序（pre、post）只处理目标文件，避免不必要的转换提供合理的默认配置和选项

Vite 提供了多种性能优化策略，可以帮助开发者提升项目的构建和运行性能。以下是 Vite 性能优化的关键方法：依赖预构建优化：合理配置 optimizeDeps：export default { optimizeDeps: { include: ['lodash'], // 强制预构建 exclude: ['some-large-lib'] // 排除大型库 }}使用缓存：Vite 会缓存预构建结果，避免重复构建构建优化：代码分割：export default { build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], utils: ['lodash', 'axios'] } } } }}Tree-shaking：Vite 自动移除未使用的代码压缩优化：export default { build: { minify: 'terser', // 或 'esbuild' terserOptions: { compress: { drop_console: true // 移除 console } } }}开发环境优化：禁用 Source Map：export default { build: { sourcemap: false }}减少文件监听：export default { server: { watch: { ignored: ['**/node_modules/**', '**/.git/**'] } }}资源优化：调整内联阈值：export default { build: { assetsInlineLimit: 4096 // 小于 4KB 的资源内联 }}使用 CDN：将大型依赖放到 CDN图片优化：使用 WebP 等现代格式CSS 优化：CSS 代码分割：Vite 自动提取 CSS 到独立文件CSS 压缩：export default { build: { cssCodeSplit: true, cssMinify: 'lightningcss' // 更快的 CSS 压缩 }}插件优化：按需加载插件：只在需要时加载插件使用轻量级插件：选择性能更好的替代方案缓存策略：文件名 Hash：使用 [hash] 实现长期缓存HTTP 缓存：配置服务器缓存策略性能监控：构建分析：npm run build -- --mode analyze使用 rollup-plugin-visualizer 分析打包结果最佳实践：避免过度优化，先分析瓶颈使用最新的 Vite 版本合理配置，避免不必要的优化定期审查依赖，移除未使用的包使用 CDN 加速静态资源

Vite 提供了完善的 TypeScript 支持，开发者可以在 Vite 项目中无缝使用 TypeScript。以下是 Vite 中 TypeScript 的使用和配置方法：基本支持：Vite 开箱即支持 TypeScript，无需额外配置。可以直接使用 .ts、.tsx 文件，Vite 会自动处理类型检查和转译。配置文件：tsconfig.json：TypeScript 配置文件vite.config.ts：Vite 配置文件（TypeScript 版本）类型检查：开发环境：Vite 默认不进行类型检查，以保持快速的开发体验可以通过 vite-plugin-checker 插件实现类型检查或者在单独的进程中运行 tsc --noEmit生产构建：Vite 构建时会使用 esbuild 进行转译esbuild 的类型检查功能有限，建议在 CI/CD 中运行 tsc配置示例：// tsconfig.json{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }]}路径别名：// vite.config.tsimport { defineConfig } from 'vite'import path from 'path'export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') } }})// tsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }}环境变量类型定义：// src/vite-env.d.tsinterface ImportMetaEnv { readonly VITE_API_URL: string readonly VITE_APP_TITLE: string}interface ImportMeta { readonly env: ImportMetaEnv}类型检查插件：// vite.config.tsimport { defineConfig } from 'vite'import checker from 'vite-plugin-checker'export default defineConfig({ plugins: [ checker({ typescript: true, eslint: { lintCommand: 'eslint "./src/**/*.{ts,tsx}"' } }) ]})最佳实践：在开发环境中使用 vite-plugin-checker 进行实时类型检查在 CI/CD 流程中运行 tsc --noEmit 确保类型安全使用 strict 模式启用所有严格类型检查合理配置 skipLibCheck 提升构建速度为环境变量定义类型，避免类型错误

Vite 提供了多种配置方式来满足不同项目的需求。以下是 Vite 配置的详细说明：配置文件：Vite 会自动从以下位置加载配置文件（按优先级排序）：vite.config.jsvite.config.mjsvite.config.tsvite.config.cjs基本配置结构：import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'export default defineConfig({ plugins: [react()], server: { port: 3000, open: true }, build: { outDir: 'dist', sourcemap: true }})常用配置选项：开发服务器配置（server）：port：指定开发服务器端口host：指定服务器主机名open：启动时自动打开浏览器proxy：配置代理，解决跨域问题cors：配置 CORS 策略https：启用 HTTPS构建配置（build）：outDir：输出目录assetsDir：静态资源目录sourcemap：是否生成 source mapminify：压缩方式（terser、esbuild）target：构建目标浏览器rollupOptions：Rollup 配置选项chunkSizeWarningLimit：chunk 大小警告阈值路径别名（resolve.alias）：resolve: { alias: { '@': '/src', '@components': '/src/components' }}CSS 配置（css）：preprocessorOptions：预处理器选项modules：CSS Modules 配置postcss：PostCSS 配置依赖优化配置（optimizeDeps）：include：强制包含的依赖exclude：排除的依赖esbuildOptions：esbuild 选项环境变量：Vite 支持通过 .env 文件配置环境变量：.env：所有环境.env.development：开发环境.env.production：生产环境.env.local：本地覆盖环境变量必须以 VITE_ 开头才能在客户端代码中访问。条件配置：export default defineConfig(({ command, mode }) => { if (command === 'serve') { return { /* dev config */ } } else { return { /* build config */ } }})TypeScript 支持：使用 defineConfig 可以获得完整的类型提示和智能补全。

Vite 支持多种前端框架，包括 Vue、React、Svelte、Solid 等。以下是 Vite 与不同框架的集成方法：Vue 集成：创建 Vue 项目：npm create vite@latest my-vue-app -- --template vue配置文件：// vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()]})支持 JSX：import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({ plugins: [vue(), vueJsx()]})React 集成：创建 React 项目：npm create vite@latest my-react-app -- --template react配置文件：// vite.config.jsimport { defineConfig } from 'vite'import react from '@vitejs/plugin-react'export default defineConfig({ plugins: [react()]})Fast Refresh：Vite 的 React 插件自动支持 Fast RefreshSvelte 集成：创建 Svelte 项目：npm create vite@latest my-svelte-app -- --template svelte配置文件：// vite.config.jsimport { defineConfig } from 'vite'import { svelte } from '@sveltejs/vite-plugin-svelte'export default defineConfig({ plugins: [svelte()]})Solid 集成：创建 Solid 项目：npm create vite@latest my-solid-app -- --template solid配置文件：// vite.config.jsimport { defineConfig } from 'vite'import solid from 'vite-plugin-solid'export default defineConfig({ plugins: [solid()]})通用配置：路径别名：import path from 'path'export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') } }})环境变量：export default defineConfig(({ mode }) => { return { define: { __APP_ENV__: JSON.stringify(mode) } }})CSS 预处理器：export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `$injectedColor: orange;` } } }})最佳实践：使用官方模板创建项目，确保最佳配置根据框架特性选择合适的插件合理配置路径别名，简化导入利用环境变量管理不同环境配置使用框架特定的优化插件框架特定优化：Vue：使用 @vitejs/plugin-vue 的 script 选项优化React：配置 @vitejs/plugin-react 的 jsxImportSourceSvelte：配置 @sveltejs/vite-plugin-svelte 的 preprocessSolid：使用 vite-plugin-solid 的 solid 选项

Vite 提供了强大的环境变量支持，开发者可以通过环境变量管理不同环境的配置。以下是 Vite 环境变量的使用方法：环境变量文件：Vite 支持以下环境变量文件（按优先级从高到低）：.env.local：本地覆盖，不应提交到版本控制.env.[mode].local：特定模式的本地覆盖.env.[mode]：特定模式的环境变量.env：所有环境通用的环境变量其中 [mode] 可以是 development、production 或自定义模式。环境变量定义：# .envVITE_APP_TITLE=My AppVITE_API_URL=https://api.example.com# .env.developmentVITE_API_URL=https://dev-api.example.com# .env.productionVITE_API_URL=https://prod-api.example.com客户端访问：只有以 VITE_ 开头的环境变量才能在客户端代码中访问：// 在客户端代码中console.log(import.meta.env.VITE_APP_TITLE)console.log(import.meta.env.VITE_API_URL)服务端访问：在 vite.config.js 中可以访问所有环境变量：import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), '') return { define: { 'import.meta.env.API_URL': JSON.stringify(env.VITE_API_URL) } }})内置环境变量：Vite 提供了一些内置环境变量：import.meta.env.MODE：当前模式（development/production）import.meta.env.BASE_URL：部署的基础 URLimport.meta.env.PROD：是否为生产环境import.meta.env.DEV：是否为开发环境import.meta.env.SSR：是否为服务端渲染使用示例：// 根据环境配置 APIconst API_URL = import.meta.env.VITE_API_URL || 'https://api.example.com'// 条件渲染{import.meta.env.DEV && <DebugPanel />}// 动态导入const module = import.meta.env.PROD ? await import('./prod-module') : await import('./dev-module')TypeScript 类型定义：// src/vite-env.d.tsinterface ImportMetaEnv { readonly VITE_APP_TITLE: string readonly VITE_API_URL: string}interface ImportMeta { readonly env: ImportMetaEnv}最佳实践：敏感信息（如 API 密钥）不应放在 .env 文件中提交到版本控制使用 .env.example 提供环境变量模板为环境变量定义 TypeScript 类型使用 VITE_ 前缀区分客户端和服务端变量在 CI/CD 中通过环境变量注入配置

Vite 是一个基于浏览器原生 ES 模块（ESM）的新一代前端构建工具，它利用了浏览器对 ESM 的原生支持，在开发环境中不需要打包即可直接运行代码。Vite 的核心优势在于：开发服务器启动速度：Vite 使用 esbuild 预构建依赖，esbuild 是用 Go 语言编写的，比传统的 JavaScript 打包工具（如 Webpack）快 10-100 倍。这使得 Vite 的冷启动时间通常在几百毫秒内，而 Webpack 可能需要几秒甚至更长时间。热模块替换（HMR）性能：Vite 的 HMR 基于原生 ESM，无论项目规模多大，HMR 更新都能保持快速。当文件修改时，Vite 只需要重新编译该文件，浏览器通过 ESM 动态导入机制获取更新，无需重新打包整个应用。生产环境构建：在生产环境中，Vite 使用 Rollup 进行打包，Rollup 能够生成优化的静态资源，包括代码分割、tree-shaking、CSS 代码分割等，确保生产环境的性能和加载速度。开箱即用的配置：Vite 提供了合理的默认配置，支持 TypeScript、JSX、CSS 预处理器、PostCSS 等现代前端技术栈，大部分情况下无需额外配置即可开始开发。插件生态：Vite 兼容 Rollup 插件，同时拥有丰富的官方和社区插件，可以轻松扩展功能。与传统构建工具对比：Webpack：需要打包整个依赖图，启动慢，HMR 在大型项目中性能下降Parcel：零配置但启动速度仍不如 ViteSnowpack：与 Vite 类似但 Vite 的生态和性能更优