Vite

让浏览器 CI 测试 Vite 生产构建,消除开发 …

一套单页应用的浏览器门禁在打开某个路由时失败。此前生产构建已经完成,体积预算和单元测试均为绿色,另外八条端到端用例也成功。失败页面报告无法从 Vite 开发服务器取得一个路由源码模块。

重新运行任务可能得到绿色结果,却会保留薄弱的验证边界。准备交付的是生成后的静态构建,浏览器门禁依赖的仍是开发期源码转换与按需模块交付。

最终改动让 Playwright 在每次执行时先构建应用,再启动全新的 Vite 生产预览。原有的网络失败注入也从源码文件 URL 改到构建后带哈希的 JavaScript 资产。修改后,九条浏览器用例、本地完整门禁和最终云端检查全部通过。

失败请求暴露了测试服务器边界

失败请 …

Vite SPA 首屏性能预算:测量真实依赖闭包

一次生产构建生成了数 MB JavaScript。完成拆包后,应用入口文件的压缩体积明显下降。两个数字都没有回答实际问题:未登录用户要下载多少代码,登录页才能进入可用状态?

一套经过脱敏的企业单页应用暴露了这个差异。原始构建在启动阶段同步注册数十个路由页面和完整组件库。第一轮优化大幅缩小了入口 chunk,也就是构建工具生成的一份代码块;这份文件却不再包含首屏路由、共享依赖和对应样式。若直接把入口体积当成结果,就会高估优化幅度。

最终方案把路由级懒加载和 Vite 构建清单预算结合起来。预算同时覆盖应用入口、指定首屏路由,以及从这两个根节点可达的全部静态 JavaScript 和 CSS 依赖 …