构建工具测试要覆盖真实打包链路
1. 线上白屏的警钟：单测全过，打包之后却直接崩溃
上个月的发布中，发生过一起隐蔽的线上事故。
一次核心路由动态导入重构后，本地 Vite 开发环境中的 Vitest 用例均通过。单元测试覆盖率较高，但未覆盖生产构建后的资源加载路径。
然而，编译打包发布到预发环境后，用户访问该路由直接抛出白屏错误：Uncaught TypeError: Failed to fetch dynamically imported module。
定位后发现，原因是在 Vite 的 Rollup 打包阶段，由于未针对某些特定 node_modules 模块配置 CSS Chunk 提取与代码分割规则（Code Splitting），生产环境生成的资源 Hash 相对路径计算出现偏差，引发了动态加载失败。
这说明：在 Vite/Rollup 构建链中，单元测试不能替代对最终产物的验证。
开发模式下的 ESM 实时编译与生产模式下的 Rollup 打包处于不同上下文，因此测试范围应覆盖开发期逻辑、构建过程和预览环境。
2. 深入 Vite 构建链路：Dev Server 与 Production 打包的双重性
为什么 Vite 项目必须建立分层测试？
因为 Vite 在开发模式与生产模式采用了完全不同的底层构建引擎：
- 开发模式（Dev Server）：依靠浏览器原生的 ES Modules (ESM)，使用 ESbuild 进行极速的依赖预构建（Pre-bundling），文件按需加载，无需打包。
- 生产模式（Production Build）：调用 Rollup 进行代码摇树（Tree-shaking）、代码分割（Code Splitting）、CSS 提取与打包压缩。
这种双重性导致许多问题（如循环依赖、CJS/ESM 混用、未包含的静态资源引用）在 Dev 模式和单测环境中完全隐形，只有在 Rollup 真正打包出最终产物时才会爆发。
下表展示了不同测试层级在 Vite 工程治理中的能力覆盖边界：
| 测试层级 | 执行工具 | 验证焦点 | 缺陷拦截类型 |
|---|---|---|---|
| 单元测试 (Unit) | Vitest / JSDOM | 纯函数、Hook 逻辑、工具类输出 | 业务逻辑错误、边界条件异常 |
| 构建集成 (Integration) | Vitest + Vite API | 插件 Hook 转换、Bundle 产物 Hash | CSS 提取失败、资源路径计算偏差 |
| 端到端测试 (E2E) | Playwright / Chromium | 生产环境产物静态服务托管运行 | 动态加载白屏、资源 404、Chunk 加载超时 |
3. 分层测试策略落地：从 Vitest 插件单测到 Playwright 产物 E2E
可以按下面的层级设置构建测试。
第一层：用 Vitest 进行 Vite 插件转换逻辑单测
当我们编写自定义 Vite 插件（例如处理自定义 SVG 转换或敏感代码清理）时，应该直接调用 Vite 的transformHook 进行单元断言：
import { describe, it, expect } from 'vitest'; import { stripDebugLogsPlugin } from '../src/plugins/strip-debug-logs'; describe('Vite 自定义清理插件测试', () => { const plugin = stripDebugLogsPlugin(); it('应该在生产构建中彻底剔除 console.log 节点', async () => { const rawCode = ` export const compute = (a, b) => { console.log("调试日志", a); return a + b; }; `; // 显式调用插件的 transform 钩子 const transformHook = plugin.transform as Function; const result = await transformHook.call({}, rawCode, 'src/test.js'); expect(result.code).not.toContain('console.log'); expect(result.code).toContain('return a + b'); }); });第二层：使用 Playwright 针对构建产物（Preview）跑 E2E 验证
CI 打出dist后，可使用vite preview启动静态服务，再用 Playwright 加载关键路径：
import { test, expect } from '@playwright/test'; test.describe('Vite 生产构建产物端到端健全性测试', () => { test('验证生产打包产物无 Console 报错且动态路由可正常载入', async ({ page }) => { const consoleErrors: string[] = []; // 监听页面控制台的致命错误 page.on('console', (msg) => { if (msg.type() === 'error') { consoleErrors.push(msg.text()); } }); // 访问 vite preview 启动的生产服务 await page.goto('http://localhost:4173/'); // 1. 验证主入口元素挂载 const appRoot = page.locator('#app'); await expect(appRoot).toBeVisible(); // 2. 模拟触发动态懒加载路由 const analyticsNav = page.locator('a[href="/analytics"]'); await analyticsNav.click(); // 3. 验证动态 Chunk 渲染正常，未发生 Failed to fetch 错误 const chartCard = page.locator('.analytics-dashboard'); await expect(chartCard).toBeVisible({ timeout: 5000 }); // 断言生产控制台未抛出任何 Error 异常 expect(consoleErrors).toEqual([]); }); });4. 总结：用多层测试防线守护构建质量
单测覆盖业务逻辑，集成测试覆盖插件转换契约，端到端测试验证最终构建产物。把动态路由、静态资源和关键页面纳入预览环境测试，能补上开发模式与生产模式之间的差异。
