Vite 4简介及使用

Vite 4 是一个现代前端构建工具，专注于极速的开发体验和高效的生产构建。它由 Vue.js 作者尤雨溪团队开发，支持主流框架（如 Vue、React、Svelte 等），并凭借其基于原生 ES 模块（ESM）的特性，在开发模式下实现了毫秒级冷启动和即时热更新。以下是 Vite 4 的核心特性及使用方法：

一、Vite 4 的核心特性

1. 性能优化：

• 更快的构建速度：升级到 Rollup 3，优化依赖预构建（Pre-Bundling）和 Tree Shaking。

• 轻量依赖：默认使用现代浏览器支持的 ESM，减少不必要的打包。

• 开发服务器提速：冷启动时间进一步缩短，热更新（HMR）几乎无延迟。

2. 框架支持增强：

• 默认支持 Vue 3、React、Svelte、Lit 等主流框架。

• 提供官方模板快速初始化项目（如 vite create）。

3. 功能改进：

• 更好的 TypeScript 支持（内置 TS 编译，无需额外配置）。

• 更灵活的配置选项（如 vite.config.js 支持异步配置）。

• 内置 CSS 模块化、PostCSS、CSS 预处理器（Sass/Less）支持。

4. 生产构建优化：

• 支持代码分割（Code Splitting）、动态导入（Dynamic Import）。

• 生成更小的 chunk 文件，优化首屏加载速度。

二、Vite 4 的基本使用

1. 安装与创建项目

• 全局安装 Vite（非必需，推荐直接使用模板）：

npm create vite@latest
# 或使用 yarn/pnpm
yarn create vite
pnpm create vite

• 选择模板：
  运行命令后，按提示选择框架（如 vue、react）和语言（TypeScript/JavaScript）。

2. 开发模式启动

进入项目目录并安装依赖：

cd your-project
npm install
npm run dev

访问 http://localhost:5173 即可实时预览（默认端口可能不同，注意终端输出）。

3. 生产构建

生成优化后的静态文件（默认输出到 dist 目录）：

npm run build

4. 本地预览生产环境

预览构建后的效果：

npm run preview

三、Vite 4 的配置文件（vite.config.js）

通过配置文件可自定义构建行为。以下是常见配置示例：

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

export default defineConfig({
  plugins: [vue()], // 插件配置（如 Vue、React 插件）
  server: {
    port: 3000,     // 修改开发服务器端口
    open: true,     // 自动打开浏览器
    proxy: {        // 配置代理
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  },
  build: {
    outDir: 'build', // 修改输出目录
    sourcemap: true  // 生成 sourcemap
  }
});

四、Vite 4 的进阶功能

1. 环境变量：

• 使用 .env 文件管理环境变量（如 .env.development、.env.production）。

• 变量需以** VITE_ 前缀**开头，例如 VITE_API_KEY=123，在代码中通过 import.meta.env.VITE_API_KEY 访问。

2. 插件系统：

• 常用插件：

  • @vitejs/plugin-vue：Vue 3 支持。

  • @vitejs/plugin-react：React 支持（含 Fast Refresh）。

  • vite-plugin-pwa：PWA 支持。

  • unplugin-auto-import：自动导入 API。

• 静态资源处理：

直接导入图片、字体等资源：

import logo from './assets/logo.png';

五、Vite 4 vs Webpack

六、迁移到 Vite 4

1.升级现有 Vite 项目：

npm install vite@latest

2. 从 Webpack 迁移：

• 逐步替换 webpack.config.js 为 vite.config.js。

• 检查插件兼容性（如 Babel、PostCSS 可直接复用）。

七、总结

Vite 4 是现代前端开发的利器，特别适合追求开发效率和轻量化的项目。其核心优势在于：

1. 极速开发体验：开发服务器启动和热更新近乎实时。

2. 简单易用：开箱即用，减少配置负担。

3. 面向未来：基于 ESM，天然支持现代浏览器特性。