IT自学博客（1）——Vite

Vite 是什么

• Vite 是一个“现代前端构建工具”（Dev Server + 生产构建），作者是 Vue 的创建者尤雨溪。
• 核心理念：开发时利用浏览器原生 ESM 按需加载源码、依赖用 esbuild 预打包，构建时使用 Rollup 输出高优化产物。
• 不是“框架”，而是框架无关的底层工具；对 Vue、React、Svelte、Solid、Preact 等都有一流支持。

核心工作原理

1. 开发模式（极快的启动与热更新）

   • 原生 ESM：源码无需打成一个包，按需请求。
   • 依赖预打包：用 esbuild 将第三方依赖预构建为 ESM，减少请求数量并提升解析速度。
   • HMR（热更新）：仅替换受影响的模块，毫秒级响应。

2. 生产构建

   • 使用 Rollup 打包，具备 Tree-shaking、代码分割、动态导入等能力。
   • 可通过 Rollup 插件与 Vite 插件扩展构建过程。

3. 插件系统

   • 兼容大多数 Rollup 插件，额外提供 Vite 专属的开发期钩子（中间件式开发服务器能力）。

主要特性

• TypeScript/JSX/TSX 开箱即用
• CSS 支持：PostCSS、CSS Modules、Sass/Less/Stylus 等
• 资源处理：静态资源导入、public/ 目录、图片/字体/媒体处理
• 环境变量：.env.[mode] 文件，使用 import.meta.env 访问（需 VITE_ 前缀）
• 多页应用（MPA）、库模式（Library Mode）
• SSR 支持（如 SvelteKit、VitePress、Nuxt 3、Astro 等都基于 Vite）
• 旧浏览器兼容：@vitejs/plugin-legacy
• 测试：与 Vitest 深度配合

快速上手

# 创建项目
npm create vite@latest my-app
# 选择模板（Vanilla / Vue / React / Svelte / Solid 等）
cd my-app
npm install
npm run dev    # 启动开发服务器
npm run build  # 生产构建
npm run preview# 本地预览构建产物

常用配置示例

• 基础结构：vite.config.ts

import {
   
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // 或 react() from '@vitejs/pl