WSL2集成Docker环境下Vite构建极慢问题排查求助

• 开启插件专属调试日志
  vanilla-extract插件支持调试日志输出，在Docker构建时添加环境变量DEBUG=vanilla-extract:*，可获取插件在样式编译、文件处理环节的详细执行步骤，定位vite:transform/vite:load阶段中耗时飙升的具体操作。修改构建命令为：

  DEBUG=vanilla-extract:* tsc && vite build -l info -d
  

  对比本地与Docker环境的日志差异，重点关注插件处理单个样式文件的耗时、缓存命中情况。

• 验证文件系统影响
  WSL2 Docker的目录挂载性能与本地存在差异，vanilla-extract可能涉及大量文件读写操作（缓存、生成CSS文件等），可通过两个测试定位：

  • 将项目文件直接复制到Docker容器内部目录（而非挂载本地目录）后执行构建，若性能恢复，说明挂载文件系统的性能瓶颈触发了插件低效逻辑。
  • 检查.vanilla-extract缓存目录：确认Docker环境下该目录是否被正确复用，是否每次构建都重新生成全部缓存文件。

• 对比插件版本代码差异
  既然回退到@vanilla-extract/vite-plugin@3.9.5可解决问题，直接对比3.9.5与4.0.16版本的源码差异，重点排查：

  • 文件处理逻辑变化：是否新增同步文件操作、修改缓存策略？
  • 依赖库版本变动：是否升级了@vanilla-extract/css或底层编译工具，导致Alpine环境下性能下降？
  • Vite钩子逻辑调整：是否在transform/load钩子中新增耗时计算步骤，在资源受限的Docker环境中被放大影响。

• 分析内存泄漏点
  针对OOM问题，在Docker构建时使用Node.js内存分析工具定位：
  修改构建命令添加内存快照参数：

  NODE_OPTIONS="--max-old-space-size=4096 --inspect-brk" tsc && vite build -l info -d
  

  在WSL2中打开Chrome浏览器，通过chrome://inspect连接Node进程，生成内存快照后分析，确认是否是vanilla-extract插件处理样式时创建大量未释放对象，导致内存占用飙升。

• 排除WSL2环境干扰
  在纯Alpine Linux虚拟机中构建项目，若问题消失，说明是WSL2与Alpine的组合环境触发了插件兼容性问题；若问题存在，则聚焦到Alpine的musl libc与本地glibc的差异，排查插件依赖工具的性能适配问题。

内容的提问来源于stack exchange，提问作者Benas Radzevicius