78 lines
3.6 KiB
Markdown
78 lines
3.6 KiB
Markdown
---
|
||
id: frontend.vite.scenario.webpack-to-vite
|
||
title: 老项目从 webpack 迁移到 Vite：评估、步骤、风险和回滚
|
||
type: scenario
|
||
domain: frontend
|
||
stack: [vite, webpack]
|
||
tags: [迁移, 构建工具, CommonJS, 环境变量, 灰度]
|
||
level: intermediate
|
||
prerequisites: [frontend.vite.dev-build-config, frontend.webpack.build-optimization]
|
||
est_hours: 2
|
||
related: [frontend.vite.interview, frontend.webpack.interview]
|
||
week: [7]
|
||
---
|
||
|
||
# 老项目从 webpack 迁移到 Vite：评估、步骤、风险和回滚
|
||
|
||
## 业务背景与问题
|
||
|
||
一个 5 年的 Vue 2 → Vue 3 后台项目（几百个页面）仍用 webpack 4 构建：开发启动要几分钟，改一行代码热更新要十几秒，团队抱怨效率低；依赖老旧，有安全漏洞告警。
|
||
|
||
## 约束
|
||
|
||
- 不能停止业务需求开发，迁移要渐进。
|
||
- 有自定义的 webpack loader（处理内部 SVG 图标）和 `process.env.XXX` 的大量使用。
|
||
- 线上不能出问题，要可以回滚。
|
||
|
||
## 方案设计
|
||
|
||
1. **评估**：列出 webpack 配置中所有的 loader / plugin，逐个找 Vite 对应方案（多数有现成插件）；扫描代码中的 `require()`、`require.context`、`process.env`、`module.hot`。
|
||
2. **并行配置**：先新增 vite.config.ts，与 webpack 配置并存，开发者可以选择用哪个启动；CI 两种都构建。
|
||
3. **逐项替换**：
|
||
- `require.context` → `import.meta.glob`；
|
||
- `process.env.VUE_APP_XXX` → `import.meta.env.VITE_XXX`（批量替换 + 类型声明）；
|
||
- 自定义 loader → Vite 插件的 `transform` 钩子；
|
||
- 别名、代理配置平移。
|
||
4. **验证**：页面冒烟测试（Playwright 跑核心流程）；对比两份构建产物的体积和关键页面性能指标。
|
||
5. **灰度上线**：先上测试环境，再让部分流量使用新产物；保留 webpack 构建一个迭代周期，出问题可以切回。
|
||
|
||
## 关键代码
|
||
|
||
```ts
|
||
// webpack：const modules = require.context("./icons", false, /\.svg$/);
|
||
// Vite：
|
||
const icons = import.meta.glob("./icons/*.svg", { query: "?raw", import: "default", eager: true });
|
||
|
||
// 自定义 loader 改写为插件
|
||
function svgIcon(): Plugin {
|
||
return {
|
||
name: "svg-icon",
|
||
transform(code, id) {
|
||
if (!id.endsWith(".svg?icon")) return null;
|
||
return { code: `export default ${JSON.stringify(optimizeSvg(code))};`, map: null };
|
||
},
|
||
};
|
||
}
|
||
```
|
||
|
||
可运行的 Vite 配置：[examples/vite-config](../examples/vite-config/)。
|
||
|
||
## 取舍
|
||
|
||
| 选择 | 优点 | 缺点 |
|
||
| --- | --- | --- |
|
||
| **迁移到 Vite（本方案）** | 开发体验大幅提升、配置简单 | 迁移成本、部分 webpack 专有特性需要替代 |
|
||
| 升级 webpack 5 + 缓存 + 更快的 loader（如 swc-loader） | 改动小 | 开发启动仍然慢于 Vite |
|
||
| Rspack（兼容 webpack 配置的 Rust 构建工具） | 配置几乎不用改 | 生态兼容性需要验证 |
|
||
|
||
## 易错点
|
||
|
||
- 只验证开发模式，没有验证生产构建。
|
||
- 批量替换环境变量时遗漏了第三方库读取的 `process.env.NODE_ENV`（Vite 构建时会自动替换这个，但其他 `process.env` 引用不会）。
|
||
- 迁移后 chunk 的划分和文件名变化导致 CDN 缓存策略失效。
|
||
- 一次性切换，没有回滚方案。
|
||
|
||
## 面试怎么讲
|
||
|
||
> “我主导过一个老项目从 webpack 迁到 Vite。先盘点配置和代码中的 webpack 专有用法，然后两套配置并存、CI 都构建，逐项替换 require.context、环境变量和自定义 loader；用 Playwright 跑核心流程冒烟，对比产物体积和性能指标；灰度上线，保留旧构建一个迭代。结果是开发启动和热更新明显变快（具体数字以你的项目实测为准）。”
|