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

　　去年双十一，我们组接了个活：给一个页游做客户端从零建站到版本追踪——不是接外包，是自家平台补漏，产品线甩过来一句“先跑通，后续迭代”，没提要不要支持 IE11，也没说美术资源会用 WebP 但不转 Base64。我原以为就搭个 Vite + TS + PixiJS 脚手架，结果第一天下午老杨蹲在工位边啃凉掉的韭菜盒子，把 build 脚本改了七版，就为绕过他本地 node_modules 下某个 mock 工具的 require.cache 污染问题。窗外在下雨，雨刮器节奏不对，左快右慢，像卡帧。

　　版本追踪那块最扯。我们真用了 SW + manifest.json + localStorage 版本戳三件套，上线第三天就被打脸：用户清缓存后进游戏，白屏三秒，console 里报错 `Cannot find module './chunk-3f8a2e1d.js'`——不是路径错，是服务端 CDN 缓存了旧 HTML，而新 JS 文件已发布，但 HTML 里写的还是上个版本的 hash。运维说“CDN 有 purge 接口啊”，可产品那边压根没配自动 purge，靠人点。上周五下午三点四十七分，小陈接了个电话，说了句“妈您等我挂了再回”，然后顺手点了下 purge，结果只清了 js 目录，没清 html。那会儿机房空调嗡嗡响得特别勤，像一台缺油的老缝纫机。

　　首屏加载压三秒？我们做到过一点八秒——测的是 iPhone 13。可运营拿她那台红米 Note 9（系统 Android 11，浏览器是自带“极速版”，实为 UC 内核降级版）跑了一次，说“卡成 PPT”，要加 loading 动画。我调了 Performance 面板，看她手机上 layout 耗时四百一十二毫秒，重排十三次，全因她要求的那个粒子特效组件里写了 `for (let i = 0; i < 200; i++) { div.style.transform = 'rotate(' + i 0.5 + 'deg)' }`——还在 render 过程中直接改 style。这个我敢打包票，我扒过她手机 devtools 的截图，缩略图右下角带水印“Remote Debug - Mi Note 9”。但后来谁也没动它，因为下周一要交验收视频，而视频用的是我们提前录好的 iPhone 录屏。

　　说到兼容性……老杨上周三晚上十点二十三分，在办公室泡了第三包酸梅汤冲剂，一边喝一边骂：“顺手支持一下”——这词是他入职六年来听过最多、最轻飘、也最致命的五个字。上季度末我们硬是往 Webpack 5 config 里塞了个 babel-plugin-transform-object-assign，就为让 Object.assign 不炸在 Android 4.4 自带 WebView 上。结果上线前发现，美术上传的某张 PNG，透明通道被他们本地 PS 插件自动嵌了“Adobe Gamma”，导致 decodeImageBitmap() 解码失败，只在低端安卓上崩。没人想到查这个，直到小陈半夜三点刷测试群，发了一句：“我刚发现我的荣耀畅玩 7X 截图全是黑块。”

文章配图，仅供参考

　　版本追踪真正崩是在热更新时。我们设计过 fallback 机制：SW 更新失败就回退到本地 bundle；SW 成功但 chunk 加载失败，就触发离线兜底页。可上线第七天，某批用户反馈“每次点开始游戏都卡在 99%”，排查三天才发现，是 SW install 阶段 fetch 的那个 `version.json` 被中间某省 ISP 的 DNS 劫持，返回了空响应——空对象 `{}`，不是 404，不是超时，就是 `{}`。我们判断逻辑里没覆盖 `JSON.parse('{}') === {}` 这种鬼情况，直接往下走，然后 `currentVersion` 变成 undefined，`nextVersion` 算出来是 NaN，最后拼出来的 chunk 地址是 `https://cdn.com/js/chunk-NaN.js`。这事儿我说不准是不是全国性的，反正那周广东、江西、云南三地测试机都撞上了。后来我们改用 `fetch(...).then(r => r.text()).then(t => JSON.parse(t || 'null'))`，宁可让它 parse null 报错，也不让它静默吞掉空对象。

　　桌上有半盒没拆封的健胃消食片，是前天团建发的，包装上印着“饭后嚼服”，我盯着看了两分钟，没动。那天产品在会议室白板上画了个大圆，写“用户体验闭环”，下面列了 8 条，其中 6 条需要前端埋点、2 条依赖 SDK 初始化顺序。可我们连自己 loader 什么时候 resolve 都不敢保证——Webpack 5 的 Module Federation 动态 remoteEntry 在某些国产定制浏览器里会异步执行两次，第一次是空模块，第二次才正常。这事我没跟任何人说，包括老杨。我怕他说：“那你还搞啥版本追踪，先搞清楚你的 module 是不是同一个 instance 吧。”

　　优胜劣汰？对。不是市场淘汰差产品，是工程现实淘汰不承认边界的人。你信 SW 就能稳住版本？它连你家楼下宽带光猫重启后重连的时间窗口都扛不住。你信 webpack stats 就能精确定位 chunk 失效？它连美术传错的 EXR 贴图解码失败都不会报错，只会默默返回黑帧。所以现在我建站第一件事不是写 App.tsx，是开一个 private git repo，名字叫 `known-broken-things`，里面放 md 和截图，最新一条是昨天加的：“华为 EMUI 12.1 + Chrome 114，ServiceWorker 注册成功但 fetch handler 不触发，抓包确认请求根本没进 SW，但 navigator.serviceWorker.controller 存在且 active —— 没人知道为什么，已加 ignore 标签。”

　　下个月我要试试用 WebContainer 做本地 build 检查，至少让开发环境能提前崩。至于线上？先把 version.json 改成 .js 后缀，加上 UMD 包裹，再 throw 个 Error。不是为了报错，是逼 CDN 别缓存它——有些 CDN 见 json 就缓，见 js 才按 header 走。老杨说这太野，我说：野不过用户手机上那个删不掉的“清理加速”APP，它上个月静默杀过我三个后台 service worker。

　　刚才保洁阿姨推着车经过，停了一下，问有没有喝完的咖啡杯。我说有，在显示器右边。她拿走的时候，碰歪了我桌角那盆绿萝，叶子晃了三下，掉了一片。我没捡。

（编辑：站长网）

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