Vite 依赖预构建：开发启动快，也要看缓存失效

Vite 依赖预构建开发启动快也要看缓存失效一、预构建解决的是依赖成本Vite 开发环境启动快很大一部分来自依赖预构建。它会把 CommonJS 或复杂依赖转换成更适合浏览器加载的 ESM并缓存起来。平时它很安静但一旦缓存频繁失效开发体验就会变差。开发启动快不代表预构建可以完全不管。二、先理解触发条件flowchart TD A[启动 Vite] -- B[扫描依赖] B -- C[预构建] C -- D[缓存] D -- E[浏览器加载]依赖版本变化、配置变化、锁文件变化、别名变化都可能触发重新预构建。大型项目里这会让启动时间忽快忽慢。export default defineConfig({ optimizeDeps: { include: [lodash-es], exclude: [my-local-package], }, });include和exclude要基于实际依赖行为配置不要随手堆。判断一个包是否适合 include可以观察它的加载模式。如果这个包被多个路由入口引用且体积大、版本稳定放进预构建可以省去浏览器端的多次请求和重复解析如果这个包只在某个低频路由里按需加载预构建反而让它变成了冷启动时的固定开销。实际项目里图表库、富文本编辑器这类重型但低频的包放 exclude 列表比 include 更合理。三、本地包要特别注意Monorepo 或本地 linked package 容易让 Vite 判断不稳定。某些包应该被当源码处理某些包适合预构建。边界不清会出现热更新异常或重复打包。vite_workspace_rules: source_packages: transpile_directly stable_lib_packages: prebundle avoid_duplicate_react: trueReact、Vue 这类核心依赖尤其要避免重复实例否则会出现奇怪运行时错误。四、缓存问题要可诊断遇到开发环境异常不要只会删node_modules/.vite。要先看依赖图、锁文件变化和预构建日志。频繁手动清缓存说明配置里有不稳定因素。vite --debug还要在团队中统一包管理器和锁文件。有人用 npm有人用 pnpm有人提交了不同 lock预构建缓存自然不稳定。最后开发体验优化也要记录指标。冷启动、热更新、首次页面加载分别耗时多少才知道优化有没有效果。还要注意条件导入。有些依赖只在特定路由或开发工具里使用如果被入口文件静态引入就会被预构建和浏览器提前加载。把低频能力改成动态 import可以减少开发时的依赖压力。const { renderChart } await import(./chart-panel);依赖预构建问题也可能来自包本身的导出结构。一个库同时提供 CJS、ESM、browser 字段时解析结果可能和预期不同。遇到异常时要看 Vite 实际解析到哪个入口。最后团队可以保留一份“依赖异常处理手册”。哪些包需要 include哪些包需要 exclude哪些包必须去重写清楚后新人不会每次从删缓存开始。CI 里也可以加开发构建健康检查。虽然预构建主要影响本地开发但 lock 文件、别名和依赖入口变化都能在 CI 里被提前发现。至少跑一次vite build和类型检查避免本地某台机器缓存掩盖问题。dev_build_check: typecheck: required vite_build: required dependency_dedupe_check: optional对独立产品来说开发体验就是迭代速度。依赖预构建稳定修小需求时才不会被工具链打断节奏。团队层面可以加一个诊断脚本不依赖开发者手动跑vite --debug而是自动检查预构建的常见不稳定因素#!/bin/bash echo Vite 预构建诊断 # 检查 lock 文件是否只有一种 LOCK_FILES$(ls -1 package-lock.json yarn.lock pnpm-lock.yaml 2/dev/null | wc -l) if [ $LOCK_FILES -gt 1 ]; then echo 警告: 发现多个锁文件预构建缓存可能不稳定 fi # 检查依赖去重 echo React 实例数: $(ls node_modules/react/package.json 2/dev/null | wc -l) # 检查关键依赖是否被重复安装 npm ls react 2/dev/null | grep -c deduped这个脚本不强但能让新人快速判断自己环境是否干净而不是上来就rm -rf node_modules/.vite rm -rf node_modules npm install。团队里如果频繁有人遇到只有我机器上有问题说明共享环境的约定还没建立起来而这种诊断脚本就是建立约定的起点。五、总结Vite 依赖预构建要关注触发条件、本地包边界、核心依赖去重、缓存诊断和团队锁文件一致性。开发启动快也要看缓存失效。稳定的快才是真正的快。