Vite 入门：设计哲学与实战指南

写给前端小白的 Vite 介绍。如果你正在纠结用什么工具来构建前端项目，这篇文章会帮你理解 Vite 为什么值得选择。

一、Vite 是什么？

Vite（法语"快"的意思，读作 /vit/）是由 Vue.js 作者尤雨溪创建的前端构建工具。它做的事情和 Webpack 一样——把你写的源代码（JSX、TypeScript、CSS 等）转换成浏览器能运行的文件。

但它的方式完全不同。

二、为什么需要 Vite？Webpack 出了什么问题？

先理解一个背景：传统的 Webpack 在启动开发服务器时，需要把你项目里所有的文件都打包一遍，然后才能在浏览器里看到页面。

项目小的时候没感觉。但当项目有几百个组件、几千个模块时，启动一次开发服务器可能要等 30 秒甚至几分钟。改一行代码，热更新也要等好几秒。

这就是 Vite 要解决的核心问题：开发体验太慢了。

三、Vite 的设计哲学

1. 利用浏览器的原生 ES Modules

这是 Vite 最核心的设计决策。

现代浏览器已经原生支持 <script type="module">，可以直接理解 import / export 语法。Vite 的思路是：既然浏览器自己能处理模块加载，那开发时就别打包了。

看我们项目的 index.html：

<script type="module" src="/src/main.tsx"></script>

注意 type="module"——浏览器会自己去请求 main.tsx，main.tsx 里 import 了什么，浏览器再去请求什么。Vite 只需要在中间做一个"翻译官"，把 .tsx 转成 .js，把 npm 包的路径重写一下就行。

结果：不管项目多大，启动速度几乎恒定。 因为 Vite 不需要提前处理所有文件，只处理浏览器实际请求的那些。

2. 依赖预构建（Pre-bundling）

有一个例外：node_modules 里的第三方库。

像 react、antd 这些库，内部可能有几百个小模块互相引用。如果让浏览器一个个去请求，会产生几百个 HTTP 请求，反而更慢。

所以 Vite 在启动时会用 esbuild（一个用 Go 写的极快的打包器）把第三方依赖预先打包成单个文件。esbuild 的速度是 Webpack 的 10-100 倍，所以这一步几乎感觉不到。

你的源代码  → 不打包，按需转换
node_modules → esbuild 预构建成单文件

3. 开发与生产，两套策略

• 开发环境：不打包，利用原生 ESM + 按需编译，追求极致的启动和热更新速度
• 生产环境：用 Rollup 做完整打包，输出优化过的静态文件（tree-shaking、代码分割、压缩等）

这是一个务实的设计——开发时要快，上线时要小。两个场景用不同的最优解。

4. 约定优于配置

Vite 开箱即用地支持：

• TypeScript
• JSX / TSX
• CSS Modules
• PostCSS
• 静态资源导入
• JSON 导入

不需要像 Webpack 那样配一堆 loader。大多数情况下，你的 vite.config.ts 可以非常简洁：

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

export default defineConfig({
  plugins: [react()],
})

这就是我们项目的完整配置。一个插件搞定 React 支持，其他的 Vite 自己处理。

四、实战：从零开始用 Vite

创建项目

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

react-ts 模板会给你一个 React + TypeScript 的项目骨架。Vite 还支持 vue、vue-ts、svelte、vanilla 等模板。

项目结构

my-app/
├── index.html          ← 入口 HTML（注意：在根目录，不在 public 里）
├── src/
│   └── main.tsx        ← 应用入口
├── public/             ← 纯静态资源（不经过构建处理）
├── vite.config.ts      ← Vite 配置
├── tsconfig.json       ← TypeScript 配置
└── package.json

一个关键区别：index.html 在项目根目录。在 Vite 的世界里，index.html 就是入口，不是什么 Webpack 的 html-webpack-plugin 生成的产物。

常用命令

npm run dev       # 启动开发服务器（毫秒级启动）
npm run build     # 生产构建（tsc 类型检查 + Rollup 打包）
npm run preview   # 本地预览生产构建结果

常见配置场景

配置路径别名：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

配置代理（解决开发环境跨域）：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

环境变量：

在项目根目录创建 .env 文件：

VITE_API_BASE=https://api.example.com

代码中通过 import.meta.env.VITE_API_BASE 访问。注意前缀必须是 VITE_，这是 Vite 的安全设计——防止你不小心把服务端密钥暴露到客户端代码里。

五、Vite vs Webpack：什么时候选谁？

简单说：新项目直接用 Vite，没有理由再选 Webpack。 除非你在维护一个已有的 Webpack 项目，迁移成本太高。

六、总结

Vite 的设计哲学可以用一句话概括：

不做浏览器已经能做的事，只在必要时介入。

它利用浏览器原生 ESM 省去了开发时的打包步骤，用 esbuild 解决了依赖预构建的性能问题，用 Rollup 保证了生产构建的质量。每一个设计决策都指向同一个目标——让开发者把时间花在写代码上，而不是等构建。

如果你是前端新手，Vite 是目前最好的起点。配置少、速度快、文档清晰。先用起来，遇到问题再查文档，比先啃一遍 Webpack 配置要高效得多。

参考资料：

• Vite 官方文档
• Why Vite - 官方解释