Vite 是什么？一文带你快速入门 – wiki基地

作者： /

揭秘下一代前端开发与构建工具：Vite 一文带你快速入门

在前端开发的浩瀚宇宙中，工具链的演进从未停歇。从早期手动引入脚本，到模块化工具（如 RequireJS、CommonJS），再到革命性的打包器（如 Webpack、Rollup），前端工程化一路披荆斩棘，日臻完善。然而，随着项目规模的日益庞大和依赖项的不断增多，传统打包器在开发体验上的瓶颈逐渐显现：漫长的冷启动时间、缓慢的热模块替换（HMR）以及复杂的配置，无不侵蚀着开发者的耐心与效率。

正是在这样的背景下，由 Vue.js 的创造者尤雨溪（Evan You）领衔开发的 Vite 横空出世。Vite，这个源自法语“快速”的单词，不仅仅是一个名字，更是一种宣言，它承诺并交付了前所未有的开发速度和极致的用户体验。本文将带你深入理解 Vite 是什么，它解决了哪些痛点，以及如何快速上手，拥抱现代前端开发的新范式。

第一章：前端工具链的演进与Vite的诞生背景

要理解 Vite 的魅力，我们首先需要回顾一下前端工具链的发展历程，以及传统打包器所面临的挑战。

1.1 传统打包器的崛起与贡献

在 ES 模块（ESM）成为浏览器标准之前，前端项目通常通过 <script> 标签引入脚本。当项目变得复杂时，这种方式导致全局变量污染、模块依赖管理混乱等问题。CommonJS 和 AMD 等模块化规范应运而生，但它们主要用于 Node.js 环境或需要在浏览器中通过额外加载器实现。

此时，打包器（Bundler） 的出现彻底改变了格局。Webpack、Rollup、Parcel 等工具通过分析项目中的模块依赖关系，将零散的模块（包括 JavaScript、CSS、图片等）打包成浏览器可识别的单个或少数几个文件。它们带来了：

  • 模块化管理： 实现了前端代码的模块化，避免全局污染，易于维护。
  • 资源优化： 支持代码压缩、混淆、Tree Shaking（摇树优化）、图片优化等，减少文件体积。
  • 预处理支持： 能够处理 TypeScript、Sass/Less、PostCSS 等预处理器。
  • 一致性： 确保了开发和生产环境的模块加载机制一致。

其中，Webpack 凭借其强大的功能、丰富的生态和高度可配置性，一度成为前端工程化的事实标准。

1.2 传统打包器的痛点：为什么Vite要出现？

尽管打包器带来了巨大的进步，但随着前端项目的复杂性不断攀升，它们的短板也日益暴露，尤其是在开发环境（development environment） 下：

  1. 冷启动时间过长： 每次启动开发服务器时，打包器都需要将整个项目的所有模块进行打包、编译、解析，然后再提供给浏览器。对于大型项目而言，这个过程可能需要数十秒甚至数分钟，极大地影响了开发效率和心情。
  2. 热模块替换（HMR）效率低下： HMR 旨在实现代码修改后，无需刷新整个页面即可更新应用状态。但传统打包器在实现 HMR 时，通常仍需重新构建一部分模块图，导致更新速度变慢，尤其是在级联依赖修改时，可能需要重新编译整个文件树，体验不佳。
  3. 复杂的配置： Webpack 等工具的配置项繁多且复杂，需要开发者投入大量时间学习和维护。对于初学者而言，门槛较高；对于经验丰富的开发者，也常常因为配置问题而耗费精力。
  4. 资源浪费： 在开发环境中，我们通常只需要修改和调试部分代码，但打包器却需要处理整个项目，导致不必要的资源消耗。

这些痛点使得开发者在等待打包器工作时感到沮丧，降低了开发体验的“幸福感”。Vite 正是为了解决这些问题而生，它旨在提供一种全新的、更加高效的前端开发工作流。

第二章：Vite 是什么？—— 解构其核心机制

Vite 是一个面向现代浏览器、基于原生 ES 模块（Native ESM）的下一代前端开发与构建工具。它由两个核心部分组成：

  1. 一个闪电般快速的开发服务器（Development Server）： 利用浏览器对原生 ES 模块的支持，实现按需加载（On-demand loading），告别了传统打包器先打包再运行的模式。
  2. 一个高度优化的构建工具（Build Tool）： 基于 Rollup 进行生产环境打包，确保最终产物的高性能和兼容性。

简而言之，Vite 在开发环境和生产环境采用了不同的策略，兼顾了开发效率和生产性能。

2.1 开发服务器的核心秘密：原生ES模块与按需编译

这是 Vite 区别于传统打包器的最关键特性。

2.1.1 拥抱原生 ES 模块（Native ESM）

自 ES2015（ES6）起，JavaScript 引入了官方的模块化标准——ES 模块。现代浏览器（Chrome、Firefox、Safari、Edge 等）早已原生支持 ES 模块，这意味着它们可以直接解析和加载使用 import 和 export 语法编写的模块，而无需经过打包器的额外转换。

Vite 的开发服务器充分利用了这一特性。当你在浏览器中访问一个 Vite 项目时，index.html 中的 <script type="module" src="/src/main.js"></script> 会告诉浏览器直接去请求 /src/main.js。当 main.js 中又 import 了其他模块（例如 import App from './App.vue'）时，浏览器会再次发起请求去获取 App.vue。

传统打包器 vs. Vite（开发环境）:

  • 传统打包器： 在服务器启动时，首先将整个应用打包成一个或多个 JS 文件。浏览器请求这些文件，然后执行。
  • Vite： 浏览器直接请求应用入口文件。当遇到 import 语句时，浏览器会向开发服务器发起新的请求，服务器按需处理（例如，将 .vue 文件转换为 JS 模块）并返回。

这种 按需加载（On-demand loading） 的机制，使得 Vite 的开发服务器启动速度极快，因为它在启动时不需要做任何打包工作。只有当浏览器实际请求某个模块时，Vite 才会对其进行必要的转换和提供。

2.1.2 依赖预编译（Dependency Pre-Bundling）与 Esbuild

虽然原生 ESM 解决了应用代码的按需加载问题，但仍有一些挑战：

  • CommonJS/UMD 兼容性： node_modules 中的许多第三方库仍然使用 CommonJS 或 UMD 格式，无法直接在浏览器中运行。
  • 模块数量过多： 某些库可能有数百个内部模块（如 lodash），浏览器如果逐个请求这些模块，会产生大量的网络请求，影响性能。
  • 版本不一致： 不同的应用模块可能依赖同一库的不同版本。

为了解决这些问题，Vite 在开发服务器启动前，会使用 esbuild 对 node_modules 中的第三方依赖进行 预编译（pre-bundling）。

  • esbuild 是什么？
    esbuild 是一个用 Go 语言编写的 JavaScript 打包器和压缩器，以其极其惊人的速度而闻名。它比 Webpack、Rollup 等基于 JavaScript 的打包器快数十甚至数百倍。
  • 预编译的作用：
    1. 将 CommonJS/UMD 格式的依赖转换为标准的 ESM 格式，使其能够在浏览器中直接使用。
    2. 将一个库的多个内部模块合并成一个 ESM 文件（例如，将 lodash 的所有函数打包成一个 lodash.js）。这大大减少了浏览器需要发起的网络请求数量。
    3. 解决了一些模块的兼容性问题。

预编译后的依赖会缓存在 node_modules/.vite 目录下。这意味着只有当依赖发生变化（例如，更新了 package.json 中的版本）时，Vite 才会重新进行预编译。由于 esbuild 的速度极快，即使需要重新编译，这个过程也几乎是瞬间完成的。

2.1.3 极速热模块替换（HMR）

基于原生 ESM 的设计，Vite 的 HMR 机制也变得异常高效：

  • 当你的代码文件发生修改时，Vite 的开发服务器会精确地找到被修改的模块及其直接依赖。
  • 它只向浏览器发送受影响模块的更新补丁（diff），而不是重新加载整个页面或重新打包整个文件树。
  • 浏览器接收到补丁后，会替换旧模块，而不会丢失应用的状态。

这意味着你对代码的修改几乎是“所见即所得”的，无需漫长的等待，大大提升了开发体验。

2.2 生产构建的核心秘密：Rollup + Esbuild

虽然原生 ESM 在开发环境表现出色，但在生产环境中，我们仍然需要打包器来优化最终产物：

  • 浏览器兼容性： 尽管现代浏览器支持 ESM，但为了兼容老旧浏览器，仍然需要将代码转换为 ES5 或其他目标。
  • 性能优化： 网络请求数量、文件大小、缓存策略等都需要精细优化。打包器可以进行 Tree Shaking、代码分割、CSS 提取与压缩、图片优化等。
  • CDN 部署： 打包后的文件更适合部署到 CDN，提高加载速度。

Vite 选择使用 Rollup 作为其生产环境的打包引擎。

  • Rollup 的优势： Rollup 以其高效的 Tree Shaking 和生成精简的 ESM 兼容 bundle 而闻名，非常适合构建应用程序和库。
  • Esbuild 的协同： 在 Rollup 进行打包之前或之后，Vite 会利用 esbuild 进行更底层的转换和压缩工作（例如，JavaScript/TypeScript 的转译和 minification），再次利用 esbuild 的极致速度来加速构建过程。

这种开发与生产分离的策略，使得 Vite 在保证开发效率的同时，也能输出高质量、高性能的生产环境代码。

第三章：为什么选择Vite？—— 核心优势一览

总结来说，Vite 带来了以下核心优势，使其成为现代前端开发的首选工具：

  1. 极速的开发体验：

    • 瞬间冷启动： 利用原生 ESM，开发服务器启动几乎没有延迟。
    • 闪电般 HMR： 精确的模块热更新，无需重新加载页面，保持应用状态。
    • 按需编译： 仅编译浏览器请求的模块，避免不必要的开销。

  2. 开箱即用（Zero-Config to Low-Config）：

    • 对于大多数现代前端项目，Vite 提供了一套合理的默认配置，无需繁琐的配置即可开始开发。
    • 支持 TypeScript、JSX、CSS Modules、PostCSS、Sass/Less 等，都可以在零配置下工作。
    • 如果需要自定义，配置选项也相对简单明了，通常通过 vite.config.js 文件进行。

  3. 框架无关性：

    • Vite 并非 Vue 独有，它是一个通用的前端构建工具。
    • 通过官方和社区提供的插件，可以完美支持 Vue 3 (以及 Vue 2, 通过插件), React, Preact, Svelte, Lit 等主流前端框架。

  4. 强大的生态系统：

    • Vite 的插件系统高度兼容 Rollup 插件，这意味着你可以利用大量的现有 Rollup 插件。
    • 此外，Vite 也拥有自己独特的插件 API，允许开发者为 Vite 定制功能。
    • 社区活跃，各种实用插件层出不穷。

  5. 优化的生产构建：

    • 虽然开发环境侧重速度，但生产环境依然通过 Rollup + Esbuild 组合提供高性能、小体积、兼容性良好的打包产物。
    • 支持代码分割、Tree Shaking、资源优化、Lazy Loading 等生产优化特性。

  6. TypeScript 支持：

    • Vite 在开发环境中只进行 TypeScript 的转译（移除类型），而不会进行类型检查。类型检查通常由 IDE 或独立的 tsc --noEmit 命令来完成，这样可以显著加快开发速度。
    • 在生产构建时，esbuild 会负责 TypeScript 的转译。

  7. 环境遍历支持：

    • 通过 import.meta.env 可以安全地访问环境变量，并且支持 .env 文件。

第四章：Vite 快速入门：从零开始构建你的第一个Vite项目

现在，让我们通过一个实际的例子，快速体验 Vite 的魅力。

4.1 前置条件

在开始之前，请确保你的开发环境满足以下条件：

  • Node.js： 版本 14.18+ 或 16+。推荐使用最新的 LTS 版本。
  • 包管理器： npm, yarn 或 pnpm。

4.2 创建你的第一个Vite项目

Vite 提供了一个非常便捷的脚手架工具，可以让你在几秒钟内搭建起一个新项目。

  1. 打开终端或命令行工具。

  2. 运行创建命令：
    根据你喜欢的包管理器，选择以下命令之一：

    “`bash

    使用 npm

    npm create vite@latest

    使用 yarn

    yarn create vite

    使用 pnpm

    pnpm create vite
    “`

  3. 按照提示进行操作：
    运行命令后，你会被引导完成一系列简单的配置，例如：

    • 项目名称 (Project name): 输入你想要的项目名称，例如 my-vite-app。

    • 选择一个框架 (Select a framework): Vite 支持多种框架。这里我们以 React 为例。你可以选择 react。

    • 选择一个变体 (Select a variant): 针对所选框架，你可以选择使用纯 JavaScript 或 TypeScript。我们选择 JavaScript。

    示例交互流程如下：

    “`
    PS C:\Users\YourUser> npm create vite@latest
    √ Project name: … my-vite-app
    √ Select a framework: › React
    √ Select a variant: › JavaScript

    Scaffolding project in C:\Users\YourUser\my-vite-app…

    Done. Now run:

    cd my-vite-app
    npm install
    npm run dev
    “`

    项目结构创建成功后，终端会给出下一步的指示。

4.3 运行你的Vite项目

按照终端的提示，进入项目目录并安装依赖，然后启动开发服务器：

  1. 进入项目目录：

    bash
    cd my-vite-app

  2. 安装依赖：

    “`bash

    使用 npm

    npm install

    使用 yarn

    yarn install

    使用 pnpm

    pnpm install
    “`

    这个过程可能需要一些时间，取决于你的网络速度。

  3. 启动开发服务器：

    “`bash

    使用 npm

    npm run dev

    使用 yarn

    yarn dev

    使用 pnpm

    pnpm dev
    “`

    你将看到类似以下输出：

    “`
    VITE v5.0.12 ready in 150 ms

    ➜ Local: http://localhost:5173/
    ➜ Network: use –host to expose
    ➜ press h + enter to show help
    “`

    这表明 Vite 开发服务器已经成功启动，并且在 http://localhost:5173/ 监听请求。你可以复制这个地址到浏览器中打开。

    注意： ready in 150 ms 这样的速度对于大型项目来说是惊人的，传统打包器可能需要数秒甚至数十秒。

4.4 体验极速HMR

现在，尝试修改你的项目代码，体验 Vite 的热模块替换。

  1. 打开项目代码：
    用你喜欢的代码编辑器（如 VS Code）打开 my-vite-app 文件夹。

  2. 修改 src/App.jsx 文件：
    找到 <p> 标签中的内容，将其修改为：

    jsx
    // src/App.jsx
    function App() {
    // ... 其他代码
    return (
    <>
    {/* ... 其他内容 */}
    <p className="read-the-docs">
    Vite 🚀 React 项目，体验极速开发！
    </p>

    )
    }

  3. 保存文件：
    你会发现浏览器中的页面几乎是瞬间更新了，内容变成了你修改后的文本，而无需手动刷新页面，也不会丢失任何应用状态（例如，如果页面上有计数器，计数器的值会保持不变）。这就是 Vite 极速 HMR 的魅力。

4.5 项目结构概览

一个典型的 Vite 项目结构通常包括：

  • index.html: 项目入口文件，Vite 开发服务器的起点。
  • src/: 你的应用源代码。
    • main.jsx (或 .js, .ts, .tsx): 应用的 JS/TS 入口文件。
    • App.jsx (或 .vue, .svelte): 根组件。
    • assets/: 静态资源（图片、字体等）。
    • components/: 其他组件。
  • public/: 纯静态资源，这些文件在开发时会直接服务，在构建时会直接复制到输出目录。它们不会被 Vite 的内部处理管道处理，因此不会被压缩、Hashed 等。
  • vite.config.js (或 .ts): Vite 的配置文件（可选）。
  • package.json: 项目依赖和脚本配置。

4.6 生产环境构建

当你的项目开发完成后，你需要将其打包为生产环境可部署的静态文件：

  1. 运行构建命令：

    “`bash

    使用 npm

    npm run build

    使用 yarn

    yarn build

    使用 pnpm

    pnpm build
    “`

    Vite 会调用 Rollup 进行生产环境打包，并利用 esbuild 进行优化。你将看到打包过程的日志输出，最终会生成一个 dist 目录。

  2. 预览生产构建结果：

    “`bash

    使用 npm

    npm run preview

    使用 yarn

    yarn preview

    使用 pnpm

    pnpm preview
    “`

    这会在本地启动一个简单的静态文件服务器，模拟生产环境的部署效果，你可以验证打包后的应用是否正常运行。

第五章：深入Vite配置与高级特性

Vite 的开箱即用体验已经足够好，但当你需要更精细的控制时，可以通过 vite.config.js（或 vite.config.ts）文件进行配置。

5.1 Vite 配置基础

vite.config.js 文件导出一个配置对象。推荐使用 Vite 提供的 defineConfig 辅助函数，它能提供类型提示，增强开发体验：

“`javascript
// vite.config.js
import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’ // 引入 React 插件

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()], // 注册插件
server: {
port: 3000, // 修改开发服务器端口
open: true, // 启动时自动在浏览器中打开
proxy: { // 配置代理
‘/api’: {
target: ‘http://localhost:8080’,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ”),
},
},
},
build: {
outDir: ‘dist’, // 构建输出目录
minify: ‘esbuild’, // 指定压缩器，默认为 esbuild
sourcemap: true, // 生成 source map
},
resolve: {
alias: { // 配置路径别名
‘@’: ‘/src’,
‘~’: ‘/src/components’,
},
},
css: {
preprocessorOptions: { // CSS 预处理器配置
scss: {
additionalData: @import "@/styles/variables.scss";,
},
},
},
})
“`

一些常用的配置选项：

  • plugins: 注册 Vite 插件（如 @vitejs/plugin-react, @vitejs/plugin-vue）。
  • server: 配置开发服务器，包括端口、代理、自动打开浏览器等。
  • build: 配置生产环境构建行为，如输出目录、压缩器、Source Map 等。
  • resolve.alias: 配置路径别名，简化模块导入路径。
  • css: 配置 CSS 相关，如 CSS Modules、预处理器选项、PostCSS 等。
  • base: 部署时的公共基础路径。
  • define: 定义全局常量替换，类似 Webpack 的 DefinePlugin。

5.2 插件系统

Vite 的强大离不开其灵活的插件系统。插件是 Vite 功能扩展的核心，可以处理不同类型的文件、集成第三方工具、修改构建流程等。

  • 官方插件： 针对主流框架如 Vue、React、Svelte 都有官方维护的插件，例如 @vitejs/plugin-react。
  • 社区插件： 大量的社区插件提供了诸如 PWA 支持、图片优化、SVG 处理等功能。
  • Rollup 插件兼容性： 由于生产构建基于 Rollup，Vite 插件 API 兼容大部分 Rollup 插件。这意味着你可以直接在 Vite 中使用许多现有的 Rollup 插件。
  • 编写自定义插件： 如果现有插件不能满足需求，你也可以根据 Vite 提供的插件 API 编写自己的插件。

5.3 环境变量

Vite 通过 import.meta.env 对象暴露环境变量。

  • import.meta.env.MODE: 当前运行模式（development 或 production）。
  • import.meta.env.BASE_URL: 部署应用的基路径。
  • import.meta.env.PROD: 是否在生产环境。
  • import.meta.env.DEV: 是否在开发环境。
  • import.meta.env.SSR: 是否在 SSR 环境。

你也可以在项目根目录下创建 .env 文件来定义自定义环境变量：

“`

.env

VITE_APP_TITLE=My Awesome Vite App
VITE_API_KEY=your_secret_key
“`

请注意，自定义环境变量需要以 VITE_ 开头，以便 Vite 将其暴露给客户端代码。在代码中可以通过 import.meta.env.VITE_APP_TITLE 访问。

5.4 静态资源处理

Vite 智能地处理静态资源：

  • public 目录： 放置在 public 目录下的资源在开发时会直接通过根路径 / 提供，在构建时会被复制到 dist 根目录。例如 public/logo.png 可以通过 /logo.png 访问。

  • ESM 导入： 在 JavaScript/TypeScript 中导入图片、SVG 等资源，Vite 会自动处理它们，并返回公共 URL。

    javascript
    import logo from './assets/logo.png' // logo 是一个 URL 字符串
    document.getElementById('app').innerHTML = `<img src="${logo}" alt="Logo" />`

第六章：Vite 与传统工具链的对比

为了更好地理解 Vite 的定位，我们来简单对比一下它与一些流行工具的区别。

6.1 Vite vs. Webpack

  • 核心理念：
    • Webpack： 基于打包器的工作流，先打包所有模块再启动开发服务器。
    • Vite： 基于原生 ESM 的工作流，开发服务器启动快，模块按需加载。
  • 开发速度：
    • Webpack： 冷启动和 HMR 随着项目规模增大而变慢。
    • Vite： 几乎瞬时的冷启动和 HMR。
  • 配置复杂度：
    • Webpack： 配置项多，学习曲线陡峭。
    • Vite： 开箱即用，配置简单明了。
  • 生产构建：
    • Webpack： 自身完成所有打包和优化。
    • Vite： 内部使用 Rollup + Esbuild 进行优化。
  • 生态系统：
    • Webpack： 生态庞大，插件众多，但部分插件可能老旧或维护不佳。
    • Vite： 生态仍在快速发展，兼容 Rollup 插件，拥抱现代标准。

6.2 Vite vs. Create React App (CRA) / Vue CLI

CRA 和 Vue CLI 是各自框架的官方脚手架工具，它们都封装了 Webpack 配置，提供了零配置的开箱即用体验。

  • 抽象层级：
    • CRA/Vue CLI： 提供了高度抽象的配置，隐藏了 Webpack 的复杂性。但当需要定制化时，可能需要 eject（弹出配置）或使用 craco/vue.config.js 等方式，增加了复杂性。
    • Vite： 同样提供开箱即用，但其底层机制（原生 ESM）更加透明和现代。定制化通过简单的 vite.config.js 文件进行，更灵活。
  • 开发体验：
    • CRA/Vue CLI： 基于 Webpack，冷启动和 HMR 速度不如 Vite。
    • Vite： 在开发速度上具有压倒性优势。
  • 适用场景：
    • CRA/Vue CLI： 适合初学者快速搭建项目，对底层工具链不关心。
    • Vite： 适合所有规模的项目，尤其对开发速度有高要求，且希望拥抱现代前端技术的开发者。

第七章：Vite 的未来与展望

Vite 作为一个相对年轻的工具，已经展现出改变前端开发格局的潜力。它的发展势头迅猛，社区活跃，新功能和优化不断推出。

  • 更广泛的框架支持： 社区正在积极开发更多框架和工具的 Vite 插件，以支持更广泛的生态。
  • Server-Side Rendering (SSR) 优化： Vite 对 SSR 提供了第一方支持，未来将继续增强。
  • 构建性能优化： 持续利用 Esbuild 和其他底层工具链的进步，进一步优化生产构建速度和产物质量。
  • 更完善的生态： 随着用户的增多，插件、工具和最佳实践将更加丰富。

Vite 不仅仅是一个工具，它代表了前端开发工具链的一种新思路：充分利用浏览器和语言的最新特性，将复杂性下沉到高效的底层语言实现（如 Go 的 esbuild），从而为开发者提供极致的效率和愉悦的体验。

总结

Vite 凭借其创新性的原生 ES 模块开发服务器和基于 Rollup + Esbuild 的高效生产构建，彻底颠覆了传统前端开发的工作流。它解决了困扰开发者多年的冷启动慢、HMR 效率低、配置复杂等痛点，以“所见即所得”的极速开发体验，重新定义了现代前端工程化。

从理解其背后的原理，到亲手搭建并运行一个 Vite 项目，再到探索其丰富的配置和插件系统，我们不难发现 Vite 的强大与优雅。它不仅是 Vue 团队的又一力作，更是整个前端社区迈向更高效、更愉悦开发体验的里程碑。

如果你还在为漫长的等待而烦恼，还在为复杂的配置而头疼，那么是时候拥抱 Vite 了。它将是你开启下一代前端开发旅程的理想伙伴。现在，就从 npm create vite@latest 开始，体验前端开发的“速度与激情”吧！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部