Tech
[程序员] 一个 Next.js WebGL 小游戏从 Lighthouse 40+ 到 97 的性能优化记录
最近做了一个基于 Next.js 、React 和 PixiJS 的网页小游戏 Color Tiles 。
页面看起来不复杂:一个 WebGL 棋盘、几个控制按钮,加上一些玩法介绍。但第一次跑移动端 Lighthouse 时只有四十多分。最初的报告没有保存下来,目前仓库里能复核的中间结果是 59 分:
LCP:11.36 s
TBT:625 ms
首屏传输量:2.33 MB
经过几轮优化后,生产构建的移动端 Lighthouse 达到 97 分,桌面端 100 分:
LCP:2.29 s ,下降约 80%
TBT:135 ms ,下降约 78%
首屏传输量:509 KB ,下降约 78%
CLS:保持为 0
这次比较有效的改动主要有这些:
不再整包引入 pixi.js-legacy ,改为从 @pixi/core 、 @pixi/display 、 @pixi/sprite 等模块按需引入,并直接使用 WebGL Renderer 。
把只能在浏览器运行的游戏模块改成动态加载,同时保留尺寸稳定的 loading...
Read the full discussion on V2EX
This article was aggregated from V2EX. Click to join the conversation.
View on V2EX