618 lines
25 KiB
Markdown
618 lines
25 KiB
Markdown
# Vite 面试题（含详细解答）
|
||
|
||
> 基于本项目的 Vue 3 + Vite + 自定义插件实战经验整理。
|
||
|
||
---
|
||
|
||
## 1. Vite 和 Webpack 在项目开发中有哪些区别？
|
||
|
||
这是一道高频面试题，关键不是背概念，而是从**开发体验、构建机制、配置复杂度、生态兼容性**四个维度说清楚。
|
||
|
||
### 1.1 核心差异：开发阶段的模块处理方式
|
||
|
||
**Webpack** 是一个 **Bundle-based** 的构建工具。开发时它会从入口文件出发，递归解析所有依赖，把所有模块打包成一个（或多个）bundle，然后启动 dev server。每次代码变更，它需要重新打包受影响的模块并刷新 bundle，这就是为什么大项目中 Webpack 的 HMR 有时会明显变慢。
|
||
|
||
**Vite** 在开发阶段不走打包流程，而是利用浏览器原生支持的 **ES Module (ESM)**。它直接把 `.vue`、`.ts`、`.jsx` 等源码文件按需编译后通过 ESM 发给浏览器。浏览器通过 `<script type="module">` 发起一个个 import 请求，Vite 的 dev server 拦截这些请求并实时编译返回。这种「按需编译」的方式使得冷启动和热更新都非常快，几乎与项目规模无关。
|
||
|
||
```
|
||
Webpack 开发流程：
|
||
入口 → 递归打包所有依赖 → bundle → dev server → 浏览器
|
||
|
||
Vite 开发流程：
|
||
浏览器 import → dev server 拦截 → 按需编译单个文件 → 返回浏览器
|
||
```
|
||
|
||
### 1.2 冷启动速度
|
||
|
||
| | Webpack | Vite |
|
||
|---|---|---|
|
||
| 冷启动 | 预先打包整个应用，大型项目可能需要几十秒甚至几分钟 | 只编译浏览器当前请求的文件，通常 < 1s |
|
||
| 原理 | Bundle-first | ESM on-demand |
|
||
|
||
### 1.3 热更新（HMR）
|
||
|
||
- **Webpack**：文件变更后，需要重新构建受影响的模块链并替换 bundle，项目越大越慢。
|
||
- **Vite**：只失效变更文件及其直接依赖链上的模块，通过 WebSocket 推送更新，浏览器重新 import 即可。因为本身就是按需加载的，HMR 粒度天然更细。
|
||
|
||
### 1.4 底层依赖
|
||
|
||
| 阶段 | Webpack | Vite |
|
||
|---|---|---|
|
||
| 开发构建 | Webpack 自己（JS 实现） | **esbuild**（Go 实现，快 10-100 倍）做预构建 |
|
||
| 生产打包 | Webpack / Terser | **Rollup**（成熟的 ES module 打包器） |
|
||
|
||
**为什么 Vite 不用 esbuild 打包生产环境？** esbuild 虽然极快，但在旧版本js代码支持，代码分割、Tree Shaking 的精细控制方面不如 Rollup 成熟。Vite 选择 Rollup 作为生产构建引擎是务实的选择。
|
||
|
||
#### 1.4.1 依赖预构建的两大作用（关键技术）
|
||
|
||
Vite 的依赖预构建解决两个核心问题：
|
||
|
||
**① 格式兼容 — CJS/UMD → ESM**
|
||
|
||
很多第三方依赖（特别是老牌 npm 包）发布的是 CommonJS 或 UMD 格式。浏览器原生只支持 ESM，无法直接加载 CJS 模块。esbuild 在预构建阶段将这些包统一转换为浏览器可识别的 ESM 格式。
|
||
|
||
```js
|
||
// node_modules 中的 CJS 包
|
||
module.exports = function sum(a, b) { return a + b }
|
||
|
||
// 预构建后（node_modules/.vite/deps/sum.js）
|
||
export default function sum(a, b) { return a + b }
|
||
```
|
||
|
||
**② 性能优化 — 合并细碎模块**
|
||
|
||
有些包内部由成百上千个独立文件组成（典型如 `lodash-es`，每个工具函数一个文件）。如果不做合并，浏览器将发起数百个级联的 HTTP 请求，形成严重的请求瀑布：
|
||
|
||
```
|
||
浏览器 import lodash-es
|
||
→ 请求 /node_modules/lodash-es/add.js
|
||
→ 请求 /node_modules/lodash-es/_baseAdd.js
|
||
→ 请求 /node_modules/lodash-es/_createMathOperation.js
|
||
→ ...（数百个请求层层依赖）
|
||
```
|
||
|
||
Vite 将这些细碎模块预构建为单个或少数几个文件，把成百上千次请求合并成数次，大幅减少浏览器请求带来的性能开销。预构建结果缓存在 `node_modules/.vite/deps/`，只在依赖变更时重新执行。
|
||
|
||
### 1.5 配置复杂度
|
||
|
||
**Webpack**：你需要配置 `entry`、`output`、`loader`（如 `css-loader`、`style-loader`、`babel-loader`）、`plugin`（如 `HtmlWebpackPlugin`、`MiniCssExtractPlugin`）。一个中等规模的项目 webpack.config.js 动辄几百行。
|
||
|
||
**Vite**：开箱即用。`.vue`、`.ts`、`.jsx`、CSS、静态资源都不需要额外配置。一个典型的 Vite 配置：
|
||
|
||
```js
|
||
// vite.config.js — 本项目实际配置
|
||
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
|
||
export default defineConfig({
|
||
plugins: [vue()] // 一行搞定 Vue SFC 支持
|
||
})
|
||
```
|
||
|
||
### 1.6 生态与兼容性
|
||
|
||
- **Webpack**：生态极其庞大，loader 和 plugin 覆盖几乎所有场景。如果你需要兼容 IE11 或做一些非常规的构建操作，Webpack 是更安全的选择。
|
||
- **Vite**：插件生态快速增长中，但一些老旧/小众的 Webpack loader 可能没有直接对应。不过 Vite 的 Rollup 插件兼容层可以复用大量 Rollup 插件。
|
||
|
||
### 1.7 总结
|
||
|
||
| 维度 | Webpack | Vite |
|
||
|---|---|---|
|
||
| 开发模式 | Bundle-first | ESM on-demand |
|
||
| 冷启动 | 慢（全量打包） | 快（按需编译） |
|
||
| HMR | 随项目规模递减 | 几乎恒定 |
|
||
| 预构建 | 无 | esbuild（Go） |
|
||
| 生产打包 | Webpack + Terser | Rollup |
|
||
| 配置复杂度 | 高 | 低 |
|
||
| 生态成熟度 | 极高 | 快速增长 |
|
||
| 浏览器要求 | 无限制 | 需支持 ESM（现代浏览器） |
|
||
|
||
**一句话总结**：Vite 用「开发时不打包 + esbuild 预构建 + Rollup 生产打包」的组合拳，在开发体验上对 Webpack 形成了代际优势；Webpack 则在兼容性和极端定制场景上仍有不可替代的地位。
|
||
|
||
---
|
||
|
||
## 2. Vite 的核心工作原理是什么？
|
||
|
||
### 2.1 开发阶段
|
||
|
||
1. **启动 dev server**：Vite 启动一个基于 [connect](https://github.com/senchalabs/connect) 的 HTTP 服务器。
|
||
2. **预构建依赖**：用 esbuild 把 `node_modules` 中的 CommonJS/UMD 依赖转换为 ESM，并合并细碎模块（如 lodash-es 的几百个文件）以减少浏览器请求数。
|
||
3. **源码按需编译**：浏览器请求 `src/main.js` → Vite 拦截 → 用 esbuild 编译 JS/TS → 返回 ESM 格式。
|
||
4. **`.vue` 文件处理**：由 `@vitejs/plugin-vue` 拦截 `.vue` 请求，将其拆分为 template、script、style 三部分分别处理。
|
||
5. **HMR**：文件变更时，Vite 通过 WebSocket 通知浏览器，浏览器重新请求变更的模块。
|
||
|
||
### 2.2 生产构建
|
||
|
||
直接使用 Rollup 打包，因为 Rollup 在 tree-shaking、代码分割、输出稳定性方面是最好的 ESM 打包器。
|
||
|
||
---
|
||
|
||
## 3. Vite 的预构建（Pre-bundling）做了什么？为什么需要它？
|
||
|
||
### 3.1 做了什么
|
||
|
||
Vite 使用 **esbuild** 对 `node_modules` 中的依赖进行预构建：
|
||
|
||
1. **CJS → ESM**：将 CommonJS/UMD 格式的包转为 ESM。
|
||
2. **合并碎片模块**：有些包（如 `lodash-es`）由数百个独立文件组成，Vite 将它们合并为单个模块，大幅减少 HTTP 请求。
|
||
|
||
### 3.2 为什么需要
|
||
|
||
- **CJS 兼容**：浏览器只认识 ESM，而 npm 上有大量 CJS 包。
|
||
- **请求瀑布**：如果不合并，`lodash-es` 的一个 import 可能触发几百个级联请求，拖慢页面加载。
|
||
|
||
### 3.3 缓存策略
|
||
|
||
预构建结果缓存在 `node_modules/.vite/deps/`，只有 `package.json` 中的依赖列表变更时才会重新执行，开发阶段几乎无感。
|
||
|
||
---
|
||
|
||
## 4. 为什么 Vite 开发时用 esbuild，生产打包用 Rollup？
|
||
|
||
| | esbuild | Rollup |
|
||
|---|---|---|
|
||
| 优势 | 极快（Go 语言，原生并发） | 成熟的 tree-shaking、精细的代码分割控制 |
|
||
| 劣势 | 代码分割能力弱，对 ESM 输出的精细控制不够 | 相对较慢 |
|
||
| 适用阶段 | **开发**——需要快速编译和预构建 | **生产**——需要最优的输出质量 |
|
||
|
||
Vite 不是绑死在一个工具上，而是「谁适合干什么就让它干什么」。
|
||
|
||
---
|
||
|
||
## 5. Vite 插件钩子完整有哪些？执行顺序是怎样的？
|
||
|
||
Vite 插件兼容 Rollup 全部钩子，并扩展了 Vite 特有钩子。钩子分为 **Build 阶段**（解析模块依赖）和 **Output 阶段**（生成产物）。
|
||
|
||
### 5.1 钩子分类总览
|
||
|
||
| 阶段 | 钩子 | 要点 |
|
||
|------|------|------|
|
||
| Build | `options` | 修改构建配置 |
|
||
| Build | `buildStart` | 构建开始 |
|
||
| Build | `resolveId` | 自定义模块解析（alias、虚拟模块） |
|
||
| Build | `load` | 返回模块源码（虚拟模块核心） |
|
||
| Build | `transform` | **最常用** — 转换单个模块代码 |
|
||
| Build | `moduleParsed` | AST 解析完成，读取 import/export |
|
||
| Build | `resolveDynamicImport` | 处理动态 `import()` |
|
||
| Build | `buildEnd` | 构建结束（成功/失败都调用） |
|
||
| Output | `outputOptions` | 修改输出配置 |
|
||
| Output | `renderStart` | 产物生成开始 |
|
||
| Output | `banner / footer / intro / outro` | chunk 首尾注入代码 |
|
||
| Output | `renderChunk` | 转换整个 chunk 代码 |
|
||
| Output | `augmentChunkHash` | 影响 chunk 文件名 hash |
|
||
| Output | `generateBundle` | **最常用** — 产物生成完、写盘前增删改 |
|
||
| Output | `writeBundle` | 产物写盘后 |
|
||
| Output | `closeBundle` | 收尾清理 |
|
||
| Vite | `config` | 修改/合并 vite 配置（插件入口首选） |
|
||
| Vite | `configResolved` | 配置解析完毕，缓存最终配置 |
|
||
| Vite | `configureServer` | 给 dev server 加中间件 |
|
||
| Vite | `configurePreviewServer` | 给预览服务器加中间件 |
|
||
| Vite | `transformIndexHtml` | 向 HTML 注入 `<script>` / `<link>` 标签 |
|
||
| Vite | `handleHotUpdate` | 自定义 HMR 行为 |
|
||
|
||
### 5.2 完整执行顺序
|
||
|
||
```
|
||
options → buildStart
|
||
→ resolveId → load → transform → moduleParsed
|
||
→ resolveDynamicImport
|
||
→ buildEnd
|
||
|
||
→ outputOptions → renderStart
|
||
→ banner → footer → intro → outro
|
||
→ renderChunk → augmentChunkHash
|
||
→ generateBundle → writeBundle → closeBundle
|
||
```
|
||
|
||
### 5.3 钩子执行类型
|
||
|
||
| 类型 | 含义 | 典型钩子 |
|
||
|------|------|---------|
|
||
| **async** | 可返回 Promise | `buildStart`、`transform` |
|
||
| **sync** | 同步执行 | `outputOptions` |
|
||
| **first** | 多个插件排队，第一个返回非 null 即停止 | `resolveId`、`load` |
|
||
| **sequential** | 多个插件按序依次执行 | `transform`、`renderChunk` |
|
||
| **parallel** | 多个插件并行执行 | `buildEnd`、`moduleParsed` |
|
||
|
||
### 5.4 常见面试追问
|
||
|
||
**transform vs renderChunk？** transform 针对**单个模块**（AST 解析前），renderChunk 针对**整个 chunk**（多个模块合并后）。
|
||
|
||
**generateBundle 为什么最常用？** 产物已生成但未写盘，可 `this.emitFile()` 追加资源、`delete bundle[fileName]` 删除、直接改 `chunk.code`。
|
||
|
||
**虚拟模块怎么实现？** `resolveId` 拦截特定 id → `load` 返回代码字符串（id 前加 `\0` 前缀标记虚拟）。
|
||
|
||
**插件间怎么共享数据？** `moduleInfo.meta` 对象可读写；闭包缓存 `configResolved` 的配置引用。
|
||
|
||
**废弃钩子：** `transformBundle` → `generateBundle`；`transformChunk` → `renderChunk`；`ongenerate` / `onwrite` → `generateBundle` / `writeBundle`。
|
||
|
||
### 5.5 enforce 执行顺序
|
||
|
||
```
|
||
enforce: 'pre' 插件
|
||
↓
|
||
核心插件（如 @vitejs/plugin-vue）
|
||
↓
|
||
普通插件（默认，如本项目中的 helloPlugin）
|
||
↓
|
||
enforce: 'post' 插件
|
||
↓
|
||
Vite 内置构建插件
|
||
```
|
||
|
||
本项目中的自定义插件示例：
|
||
|
||
```js
|
||
// vite.config.js 中的 helloPlugin
|
||
function helloPlugin() {
|
||
return {
|
||
name: 'helloPlugin',
|
||
transform(src, id) {
|
||
if (!id.includes('/src/')) return null // 只处理业务代码
|
||
if (process.env.NODE_ENV === 'production') {
|
||
const result = src.replace(/console\.log\([^)]*\);?/g, '')
|
||
return { code: result, map: null }
|
||
}
|
||
return null // 返回 null 表示不处理
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
- `transform` 钩子在每个模块被编译时调用，可修改源码。
|
||
- 返回 `null` 表示不作为，Vite 继续默认流程。
|
||
- `name` 字段必须有，用于调试和错误追踪。
|
||
|
||
---
|
||
|
||
## 6. Vite 的 HMR（热模块替换）是如何工作的？
|
||
|
||
1. **文件监听**：Vite 使用 [chokidar](https://github.com/paulmillr/chokidar) 监听文件变更。
|
||
2. **模块失效**：文件变更后，Vite 以该文件为起点，沿着模块依赖图找到所有受影响的模块。
|
||
3. **边界判定**：找到最近的「HMR 边界」（通常是接受热更新的组件/模块），只重载边界内的模块。
|
||
4. **WebSocket 推送**：Vite 通过 WebSocket 向浏览器发送更新信息（变更文件路径 + 更新类型）。
|
||
5. **浏览器处理**：客户端 runtime 收到消息后，重新 import 变更的模块并执行框架特定的更新逻辑（如 Vue 的 `hot.accept`）。
|
||
|
||
对于 Vue SFC，`@vitejs/plugin-vue` 为每个 `.vue` 文件注入 HMR 边界代码，所以修改一个组件只更新它自己，不影响页面状态。
|
||
|
||
---
|
||
|
||
## 7. Vite 中如何处理环境变量？
|
||
|
||
Vite 通过 `.env` 文件加载环境变量，支持四种优先级：
|
||
|
||
| 文件 | 用途 |
|
||
|---|---|
|
||
| `.env` | 所有环境共享 |
|
||
| `.env.local` | 本地覆盖（应加入 .gitignore） |
|
||
| `.env.[mode]` | 特定模式（如 `.env.production`） |
|
||
| `.env.[mode].local` | 特定模式的本地覆盖 |
|
||
|
||
在代码中通过 `import.meta.env` 访问：
|
||
|
||
```js
|
||
// 所有变量，VITE_ 前缀的才会暴露给客户端
|
||
console.log(import.meta.env.VITE_API_BASE_URL)
|
||
|
||
// 内置变量
|
||
import.meta.env.MODE // 'development' | 'production'
|
||
import.meta.env.DEV // boolean
|
||
import.meta.env.PROD // boolean
|
||
import.meta.env.BASE_URL // 部署基础路径
|
||
```
|
||
|
||
**安全性**：只有 `VITE_` 前缀的变量会暴露给客户端，这防止了服务端密钥泄露到浏览器。
|
||
|
||
---
|
||
|
||
## 8. Vite 如何做代码分割（Code Splitting）？
|
||
|
||
Vite 使用 Rollup 的生产构建能力，代码分割主要通过以下方式：
|
||
|
||
### 8.1 动态 import（自动分割）
|
||
|
||
任何动态 import 都会在打包时自动产生独立的 chunk，无需任何配置：
|
||
|
||
```js
|
||
// 源码
|
||
import('./sum.js').then(({ sum }) => {
|
||
console.log(sum(1, 2))
|
||
})
|
||
|
||
// 打包产物
|
||
// dist/assets/sum-xxxx.js ← 自动分离为独立 chunk
|
||
```
|
||
|
||
打包产物文件名中的 `xxxx` 是内容哈希，用于浏览器长期缓存。当文件内容不变时，哈希不变，浏览器直接命中缓存。
|
||
|
||
### 8.2 手动配置分割策略 — 对象语法
|
||
|
||
如果你的项目里有一个通用模块需要单独拆包（比如一段多处引用的工具函数），可以通过 `manualChunks` 手动指定：
|
||
|
||
```js
|
||
// src/test.js
|
||
export const sayHello = () => {
|
||
console.log('hello')
|
||
}
|
||
```
|
||
|
||
```js
|
||
// vite.config.js
|
||
export default defineConfig({
|
||
build: {
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks: {
|
||
// key: chunk 名称，value: 模块路径
|
||
'test-vendor': './src/test.js'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
### 8.3 手动配置分割策略 — 函数语法（更灵活）
|
||
|
||
对象语法只能匹配精确路径，函数语法可以基于模块 ID 做任意逻辑判断：
|
||
|
||
```js
|
||
// vite.config.js
|
||
export default defineConfig({
|
||
build: {
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks(id) {
|
||
if (id.includes('test')) {
|
||
return 'test-vendor' // 所有路径含 'test' 的模块合并为一个 chunk
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
函数语法更适合实际项目：你可以按 `node_modules` 来源拆分 vendor，按业务域拆分 page chunks，或者按体积阈值动态决定是否拆分。
|
||
|
||
---
|
||
|
||
## 9. Vite 的 CSS 处理有什么特点？
|
||
|
||
1. **原生 CSS 支持**：直接 `import './style.css'`，Vite 自动注入到页面。
|
||
2. **CSS Modules**：文件名以 `.module.css` 结尾，自动启用 CSS Modules。
|
||
3. **PostCSS**：项目根目录放置 `postcss.config.js` 即可，Vite 会自动应用。
|
||
4. **CSS 代码分割**：生产构建时，每个异步 chunk 的 CSS 会被提取为独立文件，按需加载。
|
||
5. **`@import` 内联与 rebase**：`@import` 和 `url()` 路径会自动重写，避免开发与生产路径不一致。
|
||
6. **预处理器**：安装 `sass` 或 `less` 即可直接使用 `.scss`、`.less` 文件，无需额外配置 loader。
|
||
|
||
---
|
||
|
||
## 10. Vite 的静态资源处理策略是怎样的？
|
||
|
||
- **小资源（< 4KB）**：自动转为 base64 内联，减少 HTTP 请求。
|
||
- **大资源**：复制到 `dist/assets/`，文件名包含 hash 用于缓存。
|
||
- **`public` 目录**：此目录下的资源**不会被处理**，直接复制到 `dist/` 根目录，适合 `robots.txt`、`favicon.ico` 等。
|
||
- **`new URL`**：支持通过 `new URL('./img.png', import.meta.url)` 动态引用资源。
|
||
|
||
---
|
||
|
||
## 11. 如何调试 Vite 的自定义插件？
|
||
|
||
1. **添加 `name`**：每个插件必须有唯一的 `name`，方便定位问题。
|
||
2. **在项目中引入 vite-plugin-inspect**
|
||
3. **使用 console.log**：在插件的各个钩子中添加日志，观察执行时机和参数。
|
||
**启用 debug 模式**：
|
||
```bash
|
||
DEBUG=vite:* vite
|
||
```
|
||
5. **使用 Vite 的 `apply` 选项**：可以限制插件只在开发或生产环境生效：
|
||
```js
|
||
{
|
||
name: 'dev-only-plugin',
|
||
apply: 'serve' // 或 'build'，分别限制开发/生产
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 12. Vite 项目从开发到部署的完整流程是怎样的？
|
||
|
||
```bash
|
||
# 开发
|
||
npm run dev # vite — 启动 dev server，ESM 按需编译 + HMR
|
||
|
||
# 构建
|
||
npm run build # vite build — Rollup 打包，输出到 dist/
|
||
|
||
# 本地预览生产构建
|
||
npm run preview # vite preview — 在本地启动静态服务器预览 dist/
|
||
```
|
||
|
||
典型部署：将 `dist/` 目录部署到 CDN 或静态服务器（Nginx、Vercel、Netlify 等）。
|
||
|
||
对于 SPA 应用，需要配置 fallback 到 `index.html`：
|
||
|
||
```nginx
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 13. 有没有了解微内核设计？Vite 的插件化设计思想是怎样完成个性化打包构建需求的？
|
||
|
||
### 13.1 什么是微内核架构
|
||
|
||
微内核（Microkernel）是一种架构模式，核心思想是：**内核只提供最精简的基础能力，所有扩展功能通过插件机制加载**。操作系统领域最经典的例子是 Minix 和 macOS 的 XNU 内核。
|
||
|
||
在前端构建工具领域，这个思想同样适用：
|
||
|
||
```
|
||
┌──────────────────────────────────────────┐
|
||
│ 插件层（Plugin Layer） │
|
||
│ Vue SFC │ JSX │ TS │ CSS │ ... │
|
||
├──────────────────────────────────────────┤
|
||
│ 微内核（Minimal Core） │
|
||
│ dev server │ HMR │ module graph │
|
||
│ esbuild预构建 │ 中间件机制 │
|
||
└──────────────────────────────────────────┘
|
||
```
|
||
|
||
### 13.2 Vite 的微内核设计
|
||
|
||
Vite 的核心（内核）只做几件事：
|
||
|
||
| 内核能力 | 说明 |
|
||
|---|---|
|
||
| Dev Server | 基于 connect 的 HTTP 服务器，拦截浏览器请求 |
|
||
| 模块图谱 | 追踪所有模块的依赖关系，驱动 HMR |
|
||
| esbuild 预构建 | CJS → ESM 转换 + 细碎模块合并 |
|
||
| 中间件/钩子系统 | 提供插件接入点，但不做具体编译 |
|
||
|
||
**Vue SFC 编译、JSX 转换、TypeScript 类型检查、CSS 预处理 —— 这些全部由插件完成，不在内核里。** 这就是微内核思想：内核保持精简稳定，功能由插件按需扩展。
|
||
|
||
### 13.3 插件机制如何实现个性化构建
|
||
|
||
Vite 的插件体系基于 **Rollup 插件接口** 并做了增强：
|
||
|
||
**① 通用钩子（Rollup 兼容层）**
|
||
|
||
```js
|
||
{
|
||
name: 'my-plugin',
|
||
// 构建开始
|
||
buildStart() {},
|
||
// 模块解析（可拦截 import 路径，实现虚拟模块）
|
||
resolveId(id) {},
|
||
// 模块加载（可返回自定义内容）
|
||
load(id) {},
|
||
// 代码转换（最常用）
|
||
transform(src, id) {}
|
||
}
|
||
```
|
||
|
||
**② Vite 独有钩子**
|
||
|
||
```js
|
||
{
|
||
name: 'my-vite-plugin',
|
||
// 配置解析阶段（修改用户配置）
|
||
config(config) {},
|
||
// dev server 启动后（注入自定义中间件）
|
||
configureServer(server) {},
|
||
// 处理 HMR 更新
|
||
handleHotUpdate(ctx) {}
|
||
}
|
||
```
|
||
|
||
### 13.4 一个完整的个性化构建案例
|
||
|
||
回到本项目的 `helloPlugin`，它实现了一个个性化需求——「生产环境自动移除 console.log」：
|
||
|
||
```js
|
||
// vite.config.js
|
||
function helloPlugin() {
|
||
return {
|
||
name: 'helloPlugin',
|
||
// 接入 transform 钩子，拿到每个模块的源码
|
||
transform(src, id) {
|
||
if (!id.includes('/src/')) return null // 只处理业务代码
|
||
if (process.env.NODE_ENV === 'production') {
|
||
const result = src.replace(/console\.log\([^)]*\);?/g, '')
|
||
return { code: result, map: null }
|
||
}
|
||
return null // 不处理则透传
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
这个插件展示了插件化的核心价值：**不需要修改 Vite 源码，不需要 fork 项目，只需写一个函数接入钩子，就能定制打包行为。** 这种「内核不动、插件扩展」的模式，正是微内核架构在前端工程化中的最佳实践。
|
||
|
||
### 13.5 总结：Vite 的插件化设计思想怎样完成个性化打包构建需求？
|
||
|
||
一个结构化的回答应包含以下几点：
|
||
|
||
1. **架构层面**：Vite 采用了**微内核设计**。它的核心非常轻量，仅包含一个 ESM 开发服务器和一套插件加载机制。所有高层功能，如框架支持、CSS 预处理、特定文件加载等，都由独立的插件实现。
|
||
2. **接口层面**：Vite 提供了一套**兼容 Rollup 的、统一的插件接口**。这套接口通过暴露一系列生命周期钩子 (**Hooks**)，允许开发者在构建过程的各个关键节点（如配置解析、模块加载、代码转换、HTML 生成等）注入自定义逻辑。
|
||
3. **实践层面**：开发者可以编写一个插件，通过选择合适的钩子来完成特定任务。例如，使用 `transform` 钩子可以支持一种新的语言或文件格式；使用 `configureServer` 钩子可以在开发时添加自定义的服务器中间件；使用 `transformIndexHtml` 则可以动态修改主页面的内容。
|
||
|
||
---
|
||
|
||
## 14. 站在前端架构角度说说 Bundleless 原理
|
||
|
||
### 14.1 什么是 Bundleless
|
||
|
||
传统的 Bundle 模式（Webpack 为代表）是「先打包再启动」：
|
||
|
||
```
|
||
源码 → 打包器（Bundle）→ 一个/多个 bundle 文件 → 浏览器加载
|
||
```
|
||
|
||
Bundleless 模式（Vite 为代表）跳过了打包这一步：
|
||
|
||
```
|
||
源码 → 开发服务器按需编译 → 浏览器通过 ESM 直接加载
|
||
```
|
||
|
||
### 14.2 为什么 Bundleless 现在才成为主流
|
||
|
||
Bundleless 不是新概念——ESM 规范早在 2015 年就发布了。之前无法普及的原因：
|
||
|
||
| 时间 | 瓶颈 | 现状 |
|
||
|---|---|---|
|
||
| 2015-2018 | 浏览器 ESM 支持率低（IE 占主流） | IE 已淘汰，现代浏览器全覆盖 |
|
||
| 2015-2019 | npm 包几乎全是 CJS 格式 | 新包逐渐提供 ESM 入口，且有 esbuild 做转换 |
|
||
| 2015-2019 | HTTP/1.1 并发连接有限（6个/域名） | HTTP/2 多路复用，数百个请求不再是瓶颈 |
|
||
|
||
**三个条件同时满足——浏览器 ESM 支持、npm 生态转换能力、HTTP/2 普及——Bundleless 才真正可行。**
|
||
|
||
### 14.3 Bundleless 的架构优势
|
||
|
||
**① 按需编译，冷启动 O(1)**
|
||
|
||
传统打包：启动时间 ∝ 项目模块数。Bundleless：只编译浏览器当前请求的文件，启动几乎恒定。
|
||
|
||
**② HMR 粒度天然匹配 ESM 边界**
|
||
|
||
每个文件就是一个 ESM 模块，热更新不需要重新打包 bundle，只需要让浏览器重新 import 变更的那个文件。
|
||
|
||
**③ 开发与生产的明确分工**
|
||
|
||
```
|
||
开发阶段（Bundleless） 生产阶段（Bundled）
|
||
───────────────────── ─────────────────────
|
||
不打包，按需编译 Rollup 全量打包
|
||
esbuild 做预构建 Tree-shaking
|
||
ESM 原生加载 代码分割 + 压缩
|
||
追求开发体验 追求加载性能
|
||
```
|
||
|
||
这两个阶段的目标本就不同：开发要快，生产要小。Bundleless 把这个分工理清了。
|
||
|
||
### 14.4 Bundleless 的工程代价
|
||
|
||
从架构角度，不是所有场景都适合 Bundleless：
|
||
|
||
| 场景 | Bundleless 是否适用 | 原因 |
|
||
|---|---|---|
|
||
| 现代浏览器开发 | ✅ 完美 | ESM + HTTP/2 |
|
||
| 需要兼容 IE | ❌ 不行 | IE 不支持 ESM |
|
||
| 巨型 node_modules | ⚠️ 需预构建 | 否则请求数爆炸 |
|
||
| 非 JS 资源（CSS/图片） | ⚠️ 需额外处理 | ESM 只管 JS |
|
||
|
||
这也是为什么 Vite 不是纯 Bundleless——它用预构建和 Rollup 生产打包弥补了 Bundleless 的短板。**务实的设计比纯粹的理念更重要。**
|
||
|
||
---
|
||
|
||
## 扩展思考：如果你来设计一个类似的工具，会怎么做？
|
||
|
||
这通常是大厂面试的进阶追问。可以从以下角度组织回答：
|
||
|
||
1. **利用浏览器原生能力**：现代浏览器已经支持 ESM、ES2020+ 语法，开发阶段不需要向下兼容。
|
||
2. **语言选择**：高频编译用 Go/Rust 实现的工具（如 esbuild、SWC），生产打包用成熟的 JS 生态工具。
|
||
3. **按需编译**：改变「先打包再启动」的思路，变成「请求时编译」。
|
||
4. **插件兼容**：设计插件接口时尽量对齐已有标准（如 Rollup 插件格式），降低迁移成本。
|