钉子的生活日记
文章目录

Vite 学习笔记

适合目标：系统掌握 Vite 的开发模式、插件能力、生产构建、优化策略与选型判断。
学习定位：这一份偏“现代项目默认选择 + 开发体验 + 原理解释”。
学习原则：先理解 Vite 为什么快，再理解它如何兼顾开发体验和生产构建。

目录

  1. Vite 是什么
  2. 为什么 Vite 这么流行
  3. Vite 为什么快
  4. 开发阶段与生产阶段
  5. 配置、插件与生态
  6. 常见使用方式
  7. 进阶优化
  8. 常见问题
  9. 高频面试题
  10. 一页总结

1. Vite 是什么

Vite 官方把它定义为：

面向现代 Web 项目的更快、更精简的开发体验构建工具。

它由两大部分组成：

  1. 开发服务器
  2. 生产构建命令

截至 2026 年 4 月 17 日我查阅到的官方文档，Vite 官方文档已经写明：

build command bundles your code with Rolldown

这意味着：

  1. Vite 仍然是应用构建工具
  2. 它背后的底层生产构建能力正在进入 Rolldown 时代

2. 为什么 Vite 这么流行

2.1 它击中了前端最痛的地方

  1. npm run dev 启动慢
  2. 页面一改就要等很久
  3. 配置太重
  4. 新项目不想从零配 webpack

2.2 它提供了很好的默认体验

  1. 启动快
  2. HMR 快
  3. 模板齐全
  4. 配置量相对少
  5. Vue / React / TS / CSS 体验顺滑

3. Vite 为什么快

这部分是面试核心。

3.1 开发阶段不先全量打包

Vite 的核心思想之一是：

开发环境下尽量避免像传统 bundler 那样先全量构建整个项目。

3.2 基于原生 ESM 按需提供模块

浏览器请求哪个模块，就提供哪个模块。
这样启动时不需要先把全项目打成一个大 bundle。

3.3 依赖预构建

第三方依赖通常体积大、模块格式杂。
Vite 会对它们做预处理，提高开发时加载性能与兼容性。

3.4 HMR 粒度更细

改一个模块，只让受影响模块热更新，不做整包重编译。

3.5 面试答法

如果问“Vite 为什么快”，建议这样回答：

Vite 在开发阶段基于原生 ESM 按需提供模块，不需要像传统 bundler 一样先全量打包整个应用；同时通过依赖预构建和更细粒度的 HMR，大幅提升启动速度和更新速度。

4. 开发阶段与生产阶段

4.1 开发阶段

重点：

  1. Dev Server
  2. 原生 ESM
  3. HMR
  4. 依赖预构建

4.2 生产阶段

重点：

  1. chunk 划分
  2. tree shaking
  3. 压缩
  4. 静态资源输出

4.3 为什么 Vite 不是“只有开发快”

很多人只记得 Vite 开发快，但忽略了它生产构建也需要严肃优化。
所以你要把它理解成：

开发阶段和生产阶段采用不同策略的现代构建工具。

5. 配置、插件与生态

5.1 基本配置

常见配置文件：

  1. vite.config.ts
  2. vite.config.js

常见配置项：

  1. server
  2. resolve
  3. build
  4. plugins
  5. define

5.2 插件体系

Vite 的插件系统很重要。
它的生态经验很大一部分来自 Rollup / Vite 的插件体系兼容思路。

你要理解：

  1. 为什么插件可复用
  2. 为什么框架能力常以插件形式接入
  3. 插件在开发和构建阶段都可能介入

5.3 常见官方插件

  1. Vue 插件
  2. React 插件
  3. legacy 插件

6. 常见使用方式

6.1 Vue 新项目

这是最自然的默认组合之一。

6.2 React 新项目

也是非常常见的选择。

6.3 组件库开发

可以使用 Vite 的 library mode，但你仍然要理解 Rollup / Rolldown 的产物控制思路。

6.4 SSR / SSG 工具链

很多现代工具都建立在 Vite 生态上，比如：

  1. Astro
  2. Nuxt 的相关现代构建思路
  3. 各类开发工具

7. 进阶优化

7.1 大项目优化

  1. 合理拆分依赖
  2. 控制别名和路径解析
  3. 合理使用 manualChunks
  4. 监控第三方包体积

7.2 生产构建优化

  1. 代码分割
  2. 按路由懒加载
  3. 公共包抽离
  4. 图片和字体资源优化

7.3 调试与兼容

  1. source map 策略
  2. legacy 浏览器兼容
  3. 环境变量与模式区分

8. 常见问题

8.1 为什么某些老项目迁移到 Vite 不顺

因为老项目可能强依赖：

  1. Webpack loader
  2. Webpack plugin
  3. 特定模块解析行为
  4. 自定义构建链路

8.2 为什么依赖偶尔会预构建异常

通常与：

  1. 包导出格式
  2. CJS / ESM 混用
  3. 缓存
  4. 锁文件变更

有关。

8.3 Vite 能不能完全替代 Webpack

不能一概而论。
大多数新项目可以，但超复杂遗留系统要具体评估。

9. 高频面试题

9.1 Vite 为什么快

核心答法：

  1. 原生 ESM
  2. 按需提供模块
  3. 依赖预构建
  4. 细粒度 HMR

9.2 Vite 和 Webpack 的区别

答题主线：

  1. 开发阶段策略不同
  2. 配置复杂度不同
  3. 生态历史不同
  4. 默认体验不同

9.3 Vite 生产构建还重要吗

当然重要。
开发快不代表生产包天然最优，仍然要考虑分包、缓存、压缩和兼容。

9.4 什么时候不一定优先 Vite

  1. 超复杂遗留 webpack 工程
  2. 强依赖 webpack 插件生态
  3. 企业需要更偏 Rspack 兼容路线

10. 一页总结

10.1 Vite 的定位

现代前端项目的默认优先选择之一。

10.2 记忆口诀

开发阶段按需供模块，生产阶段认真做打包。