企业官网建设流程全解析

LoopX PWA打包与Bundle冒烟：前端资源如何受测试保护

【免费下载链接】loopxLong-horizon agent control plane for durable, governed work across Codex, Claude Code, and other harnesses.项目地址: https://gitcode.com/GitHub_Trending/lo/loopx

LoopX 的看板前端通过PWA打包与Bundle冒烟测试双重机制保护前端资源：构建时保证manifest.webmanifest与图标完整落地，测试时校验"源码契约"与"产物契约"逐条一致，并借助有界资产保留防止打包目录无限膨胀。本文带你快速看懂这套前端资源保护方案 🧩

什么是 LoopX 的 PWA 看板

LoopX 的本地控制面板（目标、配额、待办、运行历史）可以像原生应用一样"安装"到桌面或移动端——这就是 PWA（渐进式 Web 应用）。它的核心配置只有一个清单文件：

• 名称与短名：LoopX 看板/LoopX
• 显示模式：standalone（独立窗口，不显示浏览器地址栏）
• 启动地址与范围：./（相对路径，便于部署在任意子目录下）
• 图标：pwa/icon-192.png与pwa/icon-512.png

清单定义在 apps/presentation/dashboard/public/manifest.webmanifest，而入口页 apps/presentation/dashboard/index.html 通过<link rel="manifest">把它接入，并声明了主题色与触摸图标。

一条构建命令，产出两套 Bundle

前端基于 Vite + React 构建，入口脚本 apps/presentation/dashboard/package.json 中的build命令会串行产出两套产物：

两套产物共享同一份 PWA 资产（清单 + 图标），由 apps/presentation/dashboard/vite.chat.config.ts 中的emitSharedPwaAssets插件直接复用，避免把无关的 showcase 资源复制进 chat 目录 📦

Bundle 冒烟测试：逐条校验 PWA 契约

真正"守门"的是冒烟脚本 examples/dashboard-pwa-bundle-smoke.py，它把 PWA 契约拆成可断言的规则：

1. index 必须引用清单——<link rel="manifest" href="...">必须逐字符匹配，防止打包时漏注入；
2. 清单与图标必须存在——manifest.webmanifest、192/512 两张图标缺一不可；
3. 字段值必须正确——display: standalone、start_url: ./、scope: ./、图标顺序严格等于[icon-192, icon-512]。

更巧妙的是它的双轨校验（见 examples/dashboard-pwa-bundle-smoke.py）：

• 源码轨（必查）：直接校验public/下的构建输入。这样即使 CI 从干净检出启动、没有本地构建产物，契约依然被保护；
• 产物轨（有则查）：一旦dist存在，就用同样的规则复查真实 Bundle，确保"写对了"也"打包对了"。

有界资产保留：防止 Bundle 目录越滚越大

带哈希的文件名（如index-w1Q81FRo.js）是打包标配，但会带来一个经典问题：旧标签页还引用着旧哈希，删了会白屏，不删则目录无限膨胀。

LoopX 的解法是有界保留：

• apps/presentation/dashboard/vite.chat.config.ts 中的retainedChatAssets插件在每次构建后，把"当前代 + 上一代"资产写入 loopx/web/chat/asset-retention.json，最多保留2 代（正好覆盖滚动升级时"旧页面还开着"的窗口）；
• 不在保留名单内的旧文件会被清理，目录大小因此有上界；
• 冒烟测试 examples/dashboard-pwa-bundle-smoke.py 反向校验这件事：schema 版本必须匹配、代数必须在 1~2 之间、index.html引用的资产必须属于最新一代、保留清单必须与磁盘文件完全相等（不多不少）。

也就是说，"打包产物长什么样"本身也被测试盯住，任何一次改动破坏了契约都会立刻暴露 ✨

如何运行与延伸阅读

在 apps/presentation/dashboard 目录下执行npm run smoke:pwa-bundle（对应脚本 examples/dashboard-pwa-bundle-smoke.py），全部通过时会输出dashboard-pwa-bundle-smoke ok。

想进一步理解前端与后端的整体协作，可延伸阅读：

• 看板设计说明：apps/presentation/dashboard/design.md
• 前端构建与脚本总览：apps/presentation/dashboard/package.json
• Chat Bundle 托管目录：loopx/web/chat/

小结

• PWA 契约即代码：清单、图标、独立显示模式全部写入仓库，而非口头约定；
• 冒烟测试双轨制：源码必查、产物有则查，干净检出也能守门；
• 有界保留：两代资产 + 磁盘一致性断言，让前端资源目录既不白屏也不膨胀。

这套"契约 + 冒烟"的组合，正是 LoopX 让长时运行的 Agent 控制面在浏览器端依然稳定可靠的底气 💪

【免费下载链接】loopxLong-horizon agent control plane for durable, governed work across Codex, Claude Code, and other harnesses.项目地址: https://gitcode.com/GitHub_Trending/lo/loopx