网页游戏客户端开发：从零建站、拆逻辑、追版本

　　去年2月，我蹲在机房三号柜后面改 webpack 配置，空调滴水正砸在我后颈上——不是漏水，是冷凝水槽满溢了，老张拿胶带缠了三圈，缠完就去接女儿电话，说“马上到校门口”，挂了还顺手撕了半张便利贴擦手机屏。

　　网页游戏客户端开发：从零建站、拆逻辑、追版本。就这句，我敢打包票。不是口号，是去年那场“幻兽纪元”紧急换皮事件里，我们四个人三天没合眼，最后靠扒开三个不同渠道包的 source map、比对七百多个 webpack chunk 的 hash 顺序、对着被压缩掉的 console.warn 字符串反推原始 if 分支条件，才把新版登录态劫持逻辑给抠出来的。中间老周用他那台三年前的MacBook Pro跑了一百一十七次 dev-server，风扇声盖过了机房报警器——其实是警报器电池没电了，没人去换，只记得那天下午四点十七分，监控屏闪了一下蓝，蓝得像当年IE6渲染失败时的渐变色块。

　　我原以为只要照着官方文档配好 babel-plugin-transform-runtime 就能稳住 polyfill 兼容性。结果上线前两小时，某安卓7.1 WebView突然把 Promise.allSettled 当成语法错误直接 throw，而这个 API 被埋在 loader 里的一个异步插件钩子里，钩子又依赖另一个已被弃用的 npm 包 v0.3.8（作者头像还是QQ空间默认黄脸），我们愣是翻到 github issue #42 才发现人家早在两年前就写了一句：“请勿在低于 Chrome 76 的环境启用此特性”——可没人告诉你，那个“Chrome 76”对应的是安卓 WebView 的哪个 build number，更没人告诉你怎么查。我查的时候手边泡的是冰美式，第三口喝下去才发现已经凉透了，杯底浮着一层油膜。

　　拆逻辑这事最恶心。你不是在读代码，是在解封印。比如他们封装了个叫 “UIMgr.initAsync()” 的方法，看起来规整干净；你追进去，它先调自己定义的 _initGuard，guard 里 check 了一个 window.__DEBUG_MODE 状态，状态来自 localStorage 的一个键名；那个键名又是上个版本遗留的临时开关，值是字符串“true#v2”；但#v2 是当时一个灰度分支标记，早该删了——结果现在这个标记成了触发某段 DOM 检测重绘的隐式开关。删了？UI 在低端机上会连闪十八秒。不删？每次启动多加载三百七十二KB 的无用资源。你说怎么选？选完还要给人解释：“这不是 bug，是生态债”。

　　追版本？呵。上周三，产品甩来一份“热更新方案V5.2最终版（终稿）”，PDF 第三页写着“支持无缝热更”，第七页脚注小字：“部分旧机型需手动刷新，列表见附件Excel第9-13列”。我打开附件，Excel 里第9列标着“三星S6 Edge（Android 7.0）”，第10列写着“华为P9 Lite（EMUI 4.1）”，第11列空着，第12列是“iPhone SE（iOS 12.4.8）”，第13列……居然是手写的“小米6X，不确定，待测”。旁边批注：“老王说可能没问题，但他上周离职了。”——他走的时候顺走了充电宝，没还，现在还在抽屉里躺着，外壳有道指甲划痕。

　　上个月复盘会上，运营当着CTO的面说：“用户反馈说新加载动画太慢，能不能把预加载时间砍掉一半？”我说：“可以，只要接受登录后三秒内所有按钮不可点，包括退出键。”她笑：“那加个‘加载中…’文字提示呗。”我说：“加了，但文字渲染依赖 FontFace.load()，这个 API 在 Safari 14 以下直接静默失败，用户看到的是空白格子。”她停顿了两秒，问：“那…能不能加个图片？”我点了下头，然后掏出手机，给她看我们上次放上去的 loading.gif——文件名是 loading_v2@2x.png，但实际内容是个帧率错乱的 GIF，转成 WebP 后丢了两帧，导出时误用了 lossless 压缩，体积反而比原图大四倍。没人发现，直到 CDN 缓存炸了两次。

　　优胜劣汰不是口号。是真的淘汰——不是淘汰人，是淘汰那种“相信一套构建流程能横跨十年”的幻觉。去年2月那会儿，我们删掉了 build 目录下的 /legacy/ie11/ 文件夹，连同里面七份用 es3-shim 补丁硬塞进来的 Vue 2.5 特性。删完立刻有人提 PR 补回“兼容性兜底”，我没合并，只是把 PR 描述改成了：“已验证，IE11 用户占比＜0.0002%，该数值来自百度统计后台真实上报，非估算”。统计后台那个数据今天还在，但那个账号的登录密码，我已经忘干净了。

文章配图，仅供参考

　　昨天整理硬盘，在一个叫“2023_02_temp”的文件夹里翻出三个 zip 包，分别是“幻兽纪元-主站-v3.2.7-bundle”、“幻兽纪元-微信渠道包-20230218-final”、“幻兽纪元-安卓应用商店版-补丁包-含签名”。我双击解压第一个，解压进度条走到 62% 卡住了，系统提示“无法解压：归档损坏”。试了第二个，正常。第三个，解压后多了个 .DS_Store 文件，和一个没命名的空 txt 文档，打开是乱码，只有开头两个字符能看清：“\\u200b\\u200b”。我截图发群里，老周回：“这应该是 BOM 头没清理干净，谁打的包？”没人回。群名叫“前端基建组-勿扰”，创建时间是2019年4月12日。

　　算了，今晚我把 dev-server 改成 --hot --inline --disable-host-check 启动，试试能不能绕过那个新来的 CORS 策略校验。要是不行……就手撸一个 fake-fetch，把 login 接口 mock 成 return Promise.resolve({code: 0, data: {token: 'test'}})，至少让设计师能在本地跑起来。毕竟她刚发消息问我：“你们是不是又改了接口？我的 Figma 插件连不上预览了。” 我还没回，外卖到了，袋子上印着“饿了么”，但配送员姓王，递过来的时候左耳戴着一只蓝牙耳机，右耳没有，另一只耳机线拖在袖口外面晃着。

（编辑：站长网）

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