什么是 Vite？

📖 概述

Vite 是新一代前端构建工具，由 Vue.js 作者尤雨溪创建。它利用浏览器原生 ES 模块和 esbuild 来实现极速的开发服务器和优化的生产构建。

🌟 核心特性

1. 极速开发服务器

• 冷启动速度比 Webpack 快 10-50 倍
• 热模块替换（HMR）速度快
• 基于原生 ES 模块，无需打包

2. 优化的构建

• 使用 esbuild 进行预构建，比传统打包器快 10-100 倍
• 代码分割和懒加载
• Tree Shaking 自动优化

3. 零配置

• 开箱即用，无需复杂配置
• 合理的默认设置
• 支持 TypeScript、JSX、CSS 预处理器

4. 插件系统

• 强大的插件生态
• 与 Rollup 兼容
• 可扩展性强

💻 基本使用

1. 创建项目

# 使用 npm
npm create vite@latest my-app -- --template vue
cd my-app
npm install

# 使用 pnpm
pnpm create vite my-app --template vue

2. 开发模式

npm run dev
# 启动开发服务器

3. 构建生产版本

npm run build
# 构建优化后的代码

4. 预览构建结果

npm run preview
# 本地预览构建产物

⚙️ 配置

vite.config.js

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

🎯 与其他工具对比

✅ 优缺点

优点

• ✅ 开发启动速度极快
• ✅ 构建性能优秀
• ✅ 配置简单
• ✅ 原生 ES 模块支持
• ✅ 插件系统强大
• ✅ Vue 官方推荐

缺点

• ❌ 相对较新，生态不如 Webpack 成熟
• ❌ 部分插件需要适配
• ❌ 生产构建基于 Rollup，需学习其生态

🎯 适用场景

• Vue 3 项目
• 需要快速开发的单页应用
• 对构建速度要求高的项目
• 现代化前端项目

📚 学习资源

• Vite 官方文档
• Vite 中文文档
• awesome-vite

🔗 相关链接

• 在线预览：Vite Demo
• GitHub：vitejs/vite
• 官网：vitejs.dev