核心特性

1. 极速冷启动
   • 利用浏览器原生 ES 模块支持（<script type="module">），无需打包直接 serve 源码，启动时间接近零秒。
   • 预构建依赖（如 React、Vue）为 ES 模块，进一步加速后续加载。
2. 即时热更新（HMR）
   • 毫秒级模块热更新，仅更新变更内容，保留应用状态（如表单输入、组件状态）。
   • 支持 CSS、JS、TS、Vue/Svelte 组件等各类模块的无缝更新。
3. 丰富的框架支持
   • 内置对 Vue、React、Preact、Svelte、Lit 等主流框架的支持，通过官方插件快速集成。
   • 支持 TypeScript、JSX、CSS Modules 等现代前端特性，无需复杂配置。
4. 优化的生产构建
   • 基于 Rollup 打包，自动分割代码（Code Splitting）、压缩资源，并生成高效的静态文件。
   • 支持多种输出格式（传统浏览器、现代浏览器、库模式）。
5. 插件生态与扩展性
   • 通过插件系统扩展功能，如导入非 JS 资源（图片、字体）、自定义构建流程。
   • 官方插件覆盖常见需求（如 PWA、SVG 组件化、ESLint 集成）。

典型应用场景

1. 现代 Web 应用开发
   • 快速搭建 Vue/React 单页应用（SPA）或多页应用（MPA），提升开发效率。
2. 组件库与工具库开发
   • 支持库模式构建，生成多种格式（ESModule、CommonJS、UMD）的输出文件。
3. 静态网站生成（SSG）
   • 结合框架（如 Vue 的 Nuxt、React 的 Next.js）构建高性能静态网站。
4. 微前端架构
   • 作为子应用的构建工具，提供独立开发和快速集成能力。

基本使用流程

1. 创建项目
   bash

   # 使用官方脚手架创建 Vite 项目
   npm init vite@latest my-project -- --template vue
   cd my-project
   npm install
   
2. 开发环境
   bash

   # 启动开发服务器（毫秒级启动）
   npm run dev
   
3. 生产构建
   bash

   # 生成优化后的生产文件
   npm run build
   
4. 项目结构示例
   plaintext

   my-project/
   ├── index.html      # 入口 HTML
   ├── src/
   │   ├── main.js     # 应用入口
   │   ├── App.vue     # 根组件
   │   └── assets/     # 静态资源
   ├── vite.config.js  # Vite 配置文件
   └── package.json
   

配置与插件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 路径别名
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080', // API 代理
    },
  },
});

优缺点对比

替代工具

• Webpack：功能全面，适合复杂项目和自定义构建需求。
• Snowpack：理念类似 Vite，但生态和性能略逊。
• esbuild：极快的构建工具，主要用于构建阶段（如 Rollup 插件）。

总结