Vite 到底能干嘛？为什么 Vue3 官方推荐它做工程化工具？

很多朋友在开发项目的时候其实都有用过Vite，也知道它是现代化构建工具，但却不清楚它是怎么用的。

只是知道项目里集成了Vite，开发的时候启动很快，配置文件也很清晰，但很少去了解它是什么，起到了什么作用。

这篇文章我们就来了解一下。

一、Vite 是什么？

它的名字来源于法语单词"vite"，意思是"快速"，由 Vue.js 作者尤雨溪开发的一款现代化前端构建工具。

它的目标很简单：让开发体验更快、更简单。

Vite不仅支持Vue，还原生支持React、Svelte、Preact、Lit等主流框架，甚至可以用于纯 HTML + JavaScript 项目。

二、Vite 的核心优势

Vite之所以火，是因为它解决了传统构建工具的几个痛点：

启动极快 开发服务器启动几乎秒开，不打包！

热更新飞快 修改代码后，浏览器只更新改动的部分，毫秒级响应

原生 ES 模块支持 直接利用现代浏览器的 ES Module 能力

零配置上手 创建项目只需一条命令，无需复杂配置

插件生态丰富 兼容 Rollup 插件，生态强大

开箱即用的丰富功能 支持 TypeScript、JSX、CSS 预处理器等，无需复杂配置。

三、与传统工具（如 Webpack）对比

1. 工作方式的根本不同

Webpack ：开发时会先打包整个项目（把所有 JS、CSS 合并成 bundle），然后启动服务器。项目越大，打包越慢。

Vite ：开发时不打包 ！直接利用浏览器原生支持的 ES 模块（<script type="module">），按需加载文件。

2. 举个实际例子

假设你有一个简单的项目结构：

css 复制代码

src/
├── main.js
└── utils.js

使用 Webpack（传统方式）

js 复制代码

// utils.js
export const add = (a, b) => a + b;

// main.js
import { add } from './utils.js';
console.log(add(1, 2));

Webpack 会： 1.把main.js和utils.js打包成一个bundle.js 2.启动本地服务器，返回这个bundle 3.浏览器加载整个bundle

即使你只改了utils.js中的一行，Webpack也要重新分析依赖、重新打包整个应用（虽然有缓存优化，但仍有延迟）。

使用 Vite

Vite 在开发时直接生成这样的 HTML：

html 复制代码

<!-- index.html -->
<script type="module" src="/src/main.js"></script>

浏览器会： 1.请求 /src/main.js 2.发现里面 import './utils.js'，自动再请求 /src/utils.js 3.按需加载，无需打包！

当你修改utils.js，Vite只告诉浏览器："喂，utils.js更新了"，浏览器只重新加载这一个文件，热更新速度接近实时！

Vite 在开发阶段 用原生 ESM，在生产阶段会用 Rollup 打包，兼顾速度和兼容性。

四、Vite 的工作原理：为什么这么快？

关键就两点：

1. 利用现代浏览器的原生 ES 模块（ESM）

现代浏览器（Chrome、Firefox、Edge 等）早就支持 <script type="module">，可以直接 import/export 模块，无需打包。

Vite 直接把这个能力用起来------开发时不打包，让浏览器自己去加载模块。

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

你可能会问：那 node_modules 里的包怎么办？它们很多不是 ESM 格式啊！

Vite会在首次启动时，用 esbuild（超快的 JS 打包器）把 node_modules 里的依赖预构建为 ESM 格式，并缓存起来。

esbuild 是用 Go 写的，比 Webpack 快 10~100 倍！

预构建只做一次，后续开发直接用缓存

这样既保证了兼容性，又不影响开发速度。

五、如何使用 Vite？

1. 创建项目

bash 复制代码

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

# 使用 yarn
yarn create vite my-react-app --template react

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

2. 项目结构

arduino 复制代码

my-vite-project/
├── index.html
├── package.json
├── vite.config.js
├── public/
│   └── favicon.ico
└── src/
    ├── main.js
    ├── App.vue
    ├── components/
    └── styles/

3. 开发服务器

bash 复制代码

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:5173 即可看到你的应用！

4. 基础配置示例

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  // 插件配置
  plugins: [vue()],
  
  // 开发服务器配置
  server: {
    port: 5173,
    open: true // 自动打开浏览器
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: true
  },
  
  // 路径别名
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

5. 完整的Vue组件示例

html 复制代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的Vite应用</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

javascript 复制代码

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')

html 复制代码

<!-- src/App.vue -->
<template>
  <div class="app">
    <h1>欢迎使用 Vite！</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style>
.app {
  text-align: center;
  padding: 2rem;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

css 复制代码

/* src/style.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

* {
  box-sizing: border-box;
}

6. 构建生产版本

bash 复制代码

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

结语

总的来说，Vite 通过利用现代浏览器的原生能力，在开发阶段省去了打包步骤，大大提升了开发效率。同时，它配置简单、上手容易，还拥有强大的插件生态，非常适合现代前端项目。

本文首发于公众号：程序员刘大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！

📌往期精彩

《async/await 到底要不要加 try-catch？异步错误处理最佳实践》

《如何查看 SpringBoot 当前线程数？3 种方法亲测有效》

《Java 开发必看：什么时候用 for，什么时候用 Stream？》

《这 10 个 MySQL 高级用法，让你的代码又快又好看》