Vite 核心概念与上手

Vite 是什么

Vite（法语"快"，发音 /vit/）是新一代前端构建工具，由 Vue 作者尤雨溪开发，支持 Vue、React、Svelte 等各种框架。

为什么快

开发环境与传统打包工具（Webpack）的根本区别：

1. 开发时不打包：基于浏览器原生 ES Module，按需编译。请求某个模块时才对该模块做转换，启动速度与项目大小无关
2. esbuild 预构建依赖：用 Go 编写的 esbuild 预打包 node_modules 中的 CommonJS/UMD 依赖，比 JS 编写的打包器快 10-100 倍
3. HMR 极快：模块热替换只精准更新修改的模块及其上游边界，不随项目变大而变慢

生产环境仍基于 Rollup 打包（esbuild 太年轻，代码分割和 CSS 处理还不够成熟）。

安装

# 创建项目（vue 模板）
npm create vite@latest my-vue-app -- --template vue-ts

# 常用模板：vue / vue-ts / react / react-ts / vanilla / vanilla-ts
cd my-vue-app
npm install
npm run dev

项目结构

├── node_modules
├── public            # 原样拷贝的静态资源（不参与打包，用绝对路径 /xx 引用）
├── src
│   ├── assets        # 会被打包处理的资源（import 引入，可获 hash 文件名）
│   ├── components
│   ├── App.vue
│   └── main.ts       # 入口
├── index.html        # 入口 HTML 在根目录（vite 以 html 为入口）
├── vite.config.ts    # 配置文件
└── package.json

与 Webpack 不同，Vite 的入口是根目录的 index.html，模块通过 <script type="module" src="/src/main.ts"> 引入。

常用命令

npm run dev       # 启动开发服务器
npm run build     # 生产构建，输出到 dist
npm run preview   # 本地预览 dist 构建产物

原生 ESM 的直观理解

浏览器直接支持 <script type="module">，import 会发起 http 请求：

<script type="module">
	import { msg } from "./msg.js";   // 浏览器向 dev server 请求 ./msg.js
	console.log(msg);
</script>

Vite 开发服务器拦截这些请求，实时把 .vue / .ts / .scss 转换成浏览器能运行的 JS，这就是"不打包"的原理。