Vite 是什么？3 分钟搞懂现代前端极速构建工具

Vite 是什么？一篇读懂前端“光速”构建神器的超友好教程

一、Vite 介绍

Vite 是一款由 Vue.js 创始人尤雨溪（Evan You）团队开发的现代前端构建工具，诞生于 2019 年，旨在解决传统构建工具（如 Webpack）在大型项目中因 JavaScript 性能限制导致的开发效率瓶颈。其名称源于法语单词 “vite”（意为“快速”），精准概括了其核心优势：极致的开发体验速度 。

⚙️ 1、核心设计理念与工作原理

Vite 的核心创新在于明确区分开发与生产环境，并利用现代浏览器特性优化流程：

①. 开发环境：基于原生 ES 模块（ESM）的按需编译

• 无打包启动：传统工具需预先打包整个应用，而 Vite 直接启动服务器，浏览器通过原生 ESM 动态请求模块。
• 按需编译：仅当浏览器请求某个模块时，Vite 才实时编译该文件（如转换 TypeScript、JSX），大幅减少计算量 。
• 依赖预构建：使用 Go 语言编写的 esbuild 工具预编译第三方依赖（CommonJS → ESM），速度比 JavaScript 工具快 10–100 倍 。

②. 生产环境：Rollup 高效打包优化

• 使用 Rollup 进行静态资源打包，支持 Tree Shaking、代码分割、压缩等优化，确保生产包体积最小化 。

⚡ 2、核心优势与特性

🔍 3、与传统构建工具（如 Webpack）对比

🛠️ 4、适用场景与限制

适用场景：

• 新项目开发：尤其适合 Vue/React/Svelte 等框架的 SPA 或 SSR 应用 。
• 大型项目迁移：显著提升开发效率，已有成熟迁移方案 。
• 微前端架构：原生支持动态导入，实现运行时按需加载 。
• 快速原型验证：通过 npm create vite 一键生成模板项目 。

限制与注意事项：

• 浏览器兼容性：旧版浏览器（如 IE11）需通过 @vitejs/plugin-legacy 添加 Polyfill 。
• HTTP 请求数：开发环境大量模块请求可能引发并发瓶颈（可通过 HTTP/2 缓解）。
• 插件生态：部分 Webpack 插件无直接替代品，需依赖社区适配 。

注：Vite 需 Node.js 18+ 或 20+ 环境运行，可通过 npm create vite@latest 快速创建项目。

二、为什么又出新工具？——从“漫长等待”到“秒开页面”

在传统打包工具（如 webpack）时代，项目越大，启动和热更新就越慢。
Vite（读音 /vit/，法语“快”的意思）用“原生 ES 模块 + 按需编译”的思路，把冷启动时间从几十秒压缩到 1 秒内，热更新更是毫秒级。
一句话：Vite 让你写代码时“保存即见效果”，彻底告别“漫长等待”。

三、Vite 的原理——像“奶茶店点单”一样高效

• 冷启动：只预编译第三方依赖（esbuild，Go 写的，巨快）。
• 热更新：浏览器直接请求改动过的单文件，其他文件不动。

类比：
传统打包 ≈ 一次性做 100 杯奶茶再上桌；
Vite ≈ 顾客点一杯做一杯，其余原料提前摆好。

四、3 分钟搭好第一个 Vite 项目

跟着敲，小白也能一次跑通。

# 1. 安装 Node.js（>=18）
node -v


# 2. 用官方脚手架创建项目
npm create vite@latest 我的第一个网页 -- --template vanilla


# 3. 进入目录并安装依赖
cd 我的第一个网页
npm install


# 4. 启动！
npm run dev

看到终端出现
➜ Local: http://localhost:5173/
浏览器秒开示例页，恭喜你完成了“编程狮光速起步”。

五、目录结构速读（中文对照版）

我的第一个网页/
├─ index.html        入口页面
├─ package.json      项目说明书
├─ vite.config.js    Vite 配置文件（可改端口、代理）
├─ 源代码/
│  ├─ main.js        主逻辑
│  ├─ style.css      样式
│  └─ 资源/          图片/字体等静态文件

六、实战演练：5 行代码加一个图片热更新

1. 在 源代码 文件夹放一张 编程狮logo.png。
2. 修改 main.js：

// 1. 引入样式
import './style.css';


// 2. 创建图片节点
const 图片 = document.createElement('img');
图片.src = 'https://atts.w3cschool.cn/images%2Fw3c%2F20220506-154940.png';
图片.style.width = '150px';


// 3. 插入页面
document.querySelector('#app').appendChild(图片);

1. 修改 style.css：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

保存后页面立即刷新，logo 居中渐变背景，整个过程不到 1 秒。
在编程狮《前端Vite学习指南》课程里，会教你基于腾讯云 webify 进行部署。

七、常见配置 3 连发（复制即可用）

vite.config.js

import { defineConfig } from 'vite';


export default defineConfig({
  server: {
    port: 3000,               // 自定义端口
    open: true,               // 自动打开浏览器
    proxy: {                  // 反向代理，解决跨域
      '/api': {
        target: 'https://api.w3cschool.cn',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

八、与 Vue/React 无缝搭档

• Vue 项目：npm create vite@latest 我的vue项目 -- --template vue
• React 项目：npm create vite@latest 我的react项目 -- --template react-ts

模板一键生成，无需手动配置 webpack。想系统学？请访问编程狮免费教程《Vite 教程》。

九、打包上线：一条命令生成极速产物

npm run build

生成的 dist/ 文件夹体积小、自带 CDN 友好哈希，可直接扔到阿里云 OSS 或 GitHub Pages。
若需兼容旧浏览器，安装 @vitejs/plugin-legacy 即可。

十、结语

Vite 不是“又一个轮子”，而是前端开发体验的革命。
跟着本教程动手 10 分钟，你就能感受到“保存即见”的爽快感。接下来，把项目上传到 GitHub，用 GitHub Actions 自动部署，你就拥有了属于自己的在线 Demo。
更多惊喜，尽在编程狮（w3cschool.cn）。