Appearance
项目难点亮点及遇到问题如何解决
2025 春节项目：二级游戏页面的加载优化
背景:
因为所有游戏页都是从主页跳转过来的二级页面，如果游戏页面加载时间过长，用户可能会直接关闭页面，导致页面停留时间和互动时长降低，进而影响活动的曝光和转化，也会影响用户体验。所以这块是可以优化的。
采取行动：
我将二级页面之间统一的 UI 框架提取出来，做成一个独立的组件，通过修改构建配置采取插件化来提前注入加载。这样就可以更快速的显示页面内容，降低了 FCP 时间，提升了用户体验。
遇到的问题：
提取的组件与游戏页面存在点击等交互逻辑，处理逻辑也会用到一些游戏数据，但在这个组件加载时，页面的很多数据是没有的，导致交互链路出现问题。比如一个返回按钮，点击是可能直接返回也可能需要弹出暂停弹窗或者二次确认弹窗等，这个时候不知道游戏状态，同时触发弹窗的方法这个情况下也不能调用，所以逻辑都无法处理。
采取的解决方式是:
首先将游戏状态进行保存，使游戏 store 在全局作用域都能访问到的，这样这个组件就能在触发时实时拿到最新数据做逻辑处理。 同时拿到数据做逻辑处理后，要触发弹窗，项目触发弹窗的方式是调用弹窗触发方法，但是通过插件注入时是不能调用到工程项目里面的方法的，所以这里采用了事件分发机制，在插件注入时就分发一个事件，然后在游戏页面中监听事件去做对应逻辑处理。这样就保证了 UI 组件更快加载显示和组件逻辑正确处理。
整个流程是： 插件注入组件 -> 组件事件点击 -> 游戏状态获取 -> 不是游戏中直接返回，是游戏中则触发事件 -> 游戏页面做相应监听并处理逻辑。
最后这个方式 FCP 时长减少大概 300ms，间接减少了用户流失率，提升了用户体验。
2025 春节项目：资源图片包体优化
背景：
因为这次所有游戏图片都放在单独的资源仓库中，为了提升加载速度，需要对全局图片进行压缩。
采取行动：
使用了命令行工具+ tinypng API 进行图片压缩，同时对图片格式做了优化。
遇到的问题及解决办法：
图片开始采取手动上传，随着项目复杂度增加，资源数量增多，手动上传工作量太大。 采取的解决方式是编写自动化脚本，通过命令行工具调用 tinypng API 进行压缩。 这样大大提升了效率。
多次执行命令行工具，没有变化的图片重复压缩，导致额度消耗过快。采取的解决办法是增加缓存机制，将压缩过的图片通过 crypto 进行 md5 加密缓存, 压缩前先判断是否已经压缩过，如果已压缩则不再重复压缩。
压缩时间太长和偶先出错。采取的解决办法是增加并发压缩，同时对出错图片进行重试机制。
最后整个项目图片压缩节省了大概 60%左右的包体大小，后续这个命令行工具发布到 npm 上，供后续项目使用。