网页游戏客户端开发：从零构建到版本追踪

　　上季度末，小孟在门户干了四年频道编辑，上个月刚接手游戏栏目改版，结果我连着盯了十七个日夜的网页游戏客户端构建流程——不是做页面，是搭那个跑在浏览器里、带状态同步、能热更新、还能被CDN缓存又不爆404的客户端壳子。我原以为就是Webpack配个Vite插件再套层WebSocket心跳，结果光是版本号注入时机就撕了三轮：前端要从CDN URL里剥，运维说得走Consul KV查，而产品半夜三点微信甩来截图，指着“v1.2.3-beta.4+git-8a7f2c”问：“这个+号算不算语义化？”

文章配图，仅供参考

　　当时机房空调坏了，风扇嘶嘶响，像有只猫卡在通风管里。我端着凉透的麻辣烫蹲在工位边，塑料盒盖掀开半秒就结了一层油膜。隔壁组老张探头问要不要顺手帮测下灰度切流，我说不用，他转身接电话，说“行行行我让运维把那个tag回滚掉”，声音压得低，但后半句飘进来了：“……真不是我们发的，是小孟后台点错了发布按钮。”

　　版本追踪那块，我们试过五种方案：Git SHA硬编码进index.html、fetch /version.json异步拉、用Service Worker劫持HTML然后动态replace、在build时生成一个__VERSION__全局变量、还有一次试了CSS Custom Properties塞version——结果发现Chrome 114对style标签里的CSS变量做JS eval会触发CSP strict-dynamic报错，而Firefox根本懒得报，静默丢掉。最后选的是第三种，因为……算了，其实没选，上周四上线前两小时，运维老赵敲我桌子说：“你那SW注册脚本里写的navigator.serviceWorker.register('/sw.js')，路径前面少了个斜杠，线上所有预缓存全失效。”我说不可能，我本地跑得好好的。他没说话，掏出手机给我看Sentry错误日志里七百多个unregister失败堆栈——每个堆栈顶都挂着一行console.warn("SW not controlled")。窗外开始下雨，雨滴打在玻璃上歪歪扭扭往下滑，跟那段register路径一样不直。

　　小孟那天下午过来催打包包名，穿了双亮黄色拖鞋，踩在地毯上没声音。她把平板往我桌上一放，说“SEO那边要加个data-qw-key属性到canvas外层div”，我瞥了眼代码，Canvas渲染是离屏WebGL上下文，外层div纯占位，加属性等于给空气贴标签。我没拦，就点了同意。后来发现这个属性被自动塞进了所有埋点event标签，导致BI平台抓到三百七十二个“qw_key_null”事件，全是空值。他们说这是“结构化增强”，我听着，手指头还在敲键盘删node_modules——删到一半发现package-lock.json里有个@webgpu/adapter被锁死在0.1.9，而我们调用的是0.1.11的API，但没人报错，因为WebGPU直接fallback到WebGL，连warning都不打。这事儿我说不准是不是bug，还是设计如此。

　　版本号那件事，优胜劣汰是真的。不是技术优劣，是活下来的全是扛住三次重写、两次重构、一次全站HTTPS强制跳转、还熬过一次CDN服务商半夜升级DNS解析策略的那批代码。别的都死了：那个用localStorage存version然后对比跳转的方案，被iOS Safari私密模式毙了；那个靠HTTP ETag强校验的，被Nginx upstream缓存策略吃掉了ETag头；还有个靠document.write重载script标签的……老李写的，他在上家公司写的，离职时没交接，现在没人敢动那几百行注释全是“此处不可删”的JS片段。他走那天，办公室灯坏了三盏，修理工来换灯管时把网线踢松了，整个测试环境挂了四十分钟。我敢打包票：那四十分钟里，至少有十八秒，我们的客户端版本比线上旧了0.0.1。

　　昨天凌晨两点，我在公司泡面桶里捞最后一根面，小孟微信弹进来：“稿子标题改了吗？运营说‘量子纠缠’这个词太硬，换成‘超链接快感’”。我回了个“嗯”，顺手把正在跑的yarn build --mode=prod进程kill -9了。终端闪了一下，停在[1] + Killed: 9 yarn build。没报错，也没日志，就像它本来就不该存在。现在我桌上还摆着那个泡面桶，汤面上浮着一圈凝固的红油，旁边是半截断掉的USB-C线，接口处铜丝露出来，像没处理完的Promise.reject()。

　　我不打算再试第四种版本追踪了。下周约了运维老赵和CDN厂商的人一起喝杯咖啡——他俩说想看看我们怎么用Cache-Control: immutable的。小孟说她请客，因为她刚把一篇“网页游戏加载慢”的吐槽稿改成了《三秒直击心巴！云游侠极速入局指南》。我答应去，但得带笔记本，顺便问问他们知不知道Service Worker里self.skipWaiting()执行时如果用户正点着“开始游戏”按钮，会不会触发两个并行的WebSocket连接……这事我现在不想碰，但得记下来。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!