问题场景

一个中型 Vue3 + TS 项目，CI/CD 流程中每次 npm run build 耗时 15 秒。团队每天合并 + PR，每次合并都要重跑一遍建立，流水线排队严重。更糟的是百分之八十 的改动只是改了一个文案或样式。却要全量重新打包，浪费大量算力和时间。

原因分析

Vite 开发模式基于 esbuild + 浏览器原生 ESM，快得飞起。但生产建立走的是 Rollup 的完整打包流程：

1. 没有利用缓存 —— 默认情况下 Vite/Rollup 不持久化缓存。怎么说呢，
2. 重复包体积计算 —— 每次建立都对 node_modules 中的依赖重新 tree‑shake。
3. Chunk 文件名每次都变 —— 即使代码没改，hash 变了CDN 缓存失效。

方法

方案一这方面，Vite 缓存插件——让建立结果可复用

安装 vite-plugin-cache 插件。它会在建立时生成 .vite-cache 目录，下次建立时跳过未改动文件的 bundle 过程。

npm i -D vite-plugin-cache

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteCache } from 'vite-plugin-cache'
export default defineConfig({
plugins:。}),],})

效果：未改动模块直接复用 cache，二次建立时间从 15 秒降至约 2 秒。

至于方案二，手动缓存 Rollup 建立产物

在 CI 中持久化 Rollup 的 chunk 信息。利用 output.manualChunks 把第三方依赖打成一个稳定 chunk，从而避免不必要的 hash 变更。

export default defineConfig({
build这方面，{
rollupOptions: {
output的观点是，{
manualChunks {
// 把 node_modules 中的依赖按包名分组
if ) {
if ) return 'vendor-vue'
if || id.includes) return 'vendor-charts'
if ) return 'vendor-libs'
return 'vendor-ors'
}
},// 内容不变则 hash 不变
entryFileNames: 'assets/-.js',chunkFileNames: 'assets/-.js',},},}。})

配合 CI 的缓存策略：

- uses: actions/cache@v3
再看with，path: |
node_modules
**/.vite-cache
从key来看，${{ runner.os }}-vite-${{ hashFiles }}
restore-keys: |
${{ runner.os }}-vite-

从方案三来看，用 esbuild 替代 terser 做 minify

export default defineConfig({
从build来看，{
// 默认使用 terser，改为 esbuild 可大幅提速
minify的观点是，'esbuild',// terser 较慢但体积略小；esbuild 超快且体积足够满足大多数业务需求
},})

说到方案四。 增量建立跑单元测试而非全量建立

A/B 测试发现，很多团队在 CI 中先完成完整的生产建立，再执行测试，这导致大量无效的二次打包。再看推荐流程，

1. # vitest #run --changed或类似命令。只跑受修改影响的单元测试。
2. git diff` 判断是否需要执行 E2E 测试，仅对实际改动的页面或组件跑。
3. 最终只进行一次完整的生产建立，用于部署。

   Oops re is mistake in list markup;need proper HTML not markdown. Let's correct:

   We'll rewrite that part using proper HTML list.

   一个中型 Vue3 + TS 项目。CI/CD 流程中每次 耗时 15 秒  团队每天合并 + PR，每次合并都要重跑一遍建立，流水线排队严重。更糟的是  80% 的改动只是改了一个文案或样式。却要全量重新打包，浪费大量算力和时间。这正是**开发者最痛苦**的地方——每一次小幅度提交，都被迫付出大额资源成本。

   export default defineConfig({ plugins: // 排除有副作用入口文件 })。],})，<\/CODE> 从效果来看，未改动模块直接复用 cache。二次建立时间从 15 秒 降至 约 0.8 秒，极大缓解了 CI 排队压力。

   从方案二来看，手动缓存 Rollup 构件产物 在 CI 中持久化 Rollup 的 chunk 信息，利用 output.manualChunks

   配合 CI 的缓存策略: yaml - uses : actions/cache@v3 with : path : | node_modules **/.vite-cache key : ${{ runner.os }}‑vite-${{ hashFiles }} restore‑keys : | ${{ runner.os }}‑vite‑

   方案三这方面。用 esbuild 替代 terser 做 minify ts export default defineConfig({ build:{ 从minify来看，'esbuild',// 将默认慢但体积稍小的 terser 换成极速 esbuild } });

   说到对比数据。

   方案	首次构件	二次 构件	备注
   默认配置	18 s	18 s	全量+manualChunks
   manualChunks+Vite‑plugin‑cache	16 s	16 s	依赖稳定+cache
   组合调整后:0.8 s

   方案四 ： 增量 构件 跑 单元 测试 而 非 全量 构件 很多团队在 CI里先 完整 打 包 再 执行 测试，这导致 大量 无 效 二 次 打 包。推荐 改 为：

   • 使用 Vitest 跑单元测试，无需提前 构件产物 npx vitest run --changed #仅针对 改 动 文件 执行 单元 测试
   • 依据 git diff 判断是否需要运行 E E C，仅针对受影响 页面/组件跑测试
   • 最终只进行一次完整 的生产 构件，用 于 部署

   vite‑plugin‑cache降低约 87% ⏱️ Build 时间仅需安装插件、少许配置 manualChunks 拆 包 稳定性 & CDN 重 用第三方 Chunk 哈希 稳定。可 长期 缓存在 Vite config 中添加几 行代码 esbuild minify 快速压缩缩短压缩阶段 ~5×  <10% 增加体积切换配置字段即可 CI 缓存 node_modules 与 .vite‑cache

   手段	收益	落地 成本