谷歌跑分100分：这个React项目把性能优化做成了数学题

去年有个前端团队在技术分享会上晒了张截图：Lighthouse桌面端100分，移动端95+，总阻塞时间0毫秒。台下有人问是不是用了什么黑科技框架，答案让人意外——React 18，外加一个开发者把每个毫秒都当成了债务来还。

性能优化从来不是"差不多就行"，而是一道可以精确求解的数学题。

这位开发者叫CrisisCore-Systems，一个自称"在真实世界的不稳定中自学成才"的工程师。他的技术栈看起来平平无奇：React 18、TypeScript严格模式、Vite构建、SCSS模块。但正是这套"无聊"的组合，被他调校出了极限输出。

为什么100分比99分难10倍

Lighthouse的评分机制像个苛刻的会计。99分意味着你还有1%的冗余可以挥霍，100分则要求你把所有账算平。

CrisisCore-Systems的突破口选在了"关键渲染路径"——这个被说烂了的词，在他手里变成了可操作的检查清单。他做的第一件事是诚实面对首屏：哪些内容必须立刻出现，哪些可以等。

字体成了第一个被审问的对象。很多人不知道，自定义字体是静默的性能杀手。浏览器遇到@font-face时会陷入两难：等字体下载完再渲染文字（白屏），还是先显示 fallback 字体再替换（闪烁）。他选择了第三条路：只加载一个子集化的WOFF2文件，用font-display: swap明确告诉浏览器"先凑合显示，来了再换"，同时把字体文件体积压到了12KB以下。

图片策略更激进。所有非首屏图片懒加载，首屏图片用WebP格式，srcset根据DPI自动切换分辨率。他甚至在构建阶段就跑了遍Lighthouse，把发现的最大内容绘制（LCP）瓶颈——一张 hero 图片——改成了低质量占位图+高清图渐进加载。

Vite的隐藏杠杆

选Vite不只是为了"快"。CrisisCore-Systems看中的是它对代码分割的原生支持。

React项目的典型陷阱是打包出一个巨大的bundle.js。他的解法是把路由级别的组件全部动态导入，配合React.lazy和Suspense。用户访问首页时，只下载首页需要的18KB代码，其他页面按需拉取。

更细粒度的优化在组件层。他用了一个反直觉的策略：把重交互组件拆得更碎。一个复杂的仪表盘被拆成7个独立chunk，首屏只渲染框架，数据可视化模块等用户滚动到视口才加载。这带来的不是卡顿，而是首屏时间从1.2秒降到0.4秒。

CSS方面，SCSS模块+BEM的命名规范被他用成了 tree-shaking 的辅助工具。每个组件样式独立，构建时未使用的规则直接剔除。最终产出的CSS只有23KB，且全部内联到HTML头部——消除了渲染阻塞的外部样式表请求。

0毫秒阻塞时间的秘密

总阻塞时间（TBT）0毫秒是移动端95+分的核心支撑。这个数字意味着主线程在关键时间内完全没被占用。

React 18的并发特性在这里派上用场，但只是基础。CrisisCore-Systems的真正武器是Web Workers——他把JSON数据解析、复杂计算全部丢到后台线程。主线程只干一件事：响应用户。

一个具体场景：他的作品集需要展示大量项目数据。传统做法是在useEffect里fetch然后setState，这会阻塞渲染。他的改法是fetch后把原始数据postMessage给Worker，Worker处理完再传回来，主线程只接收最终结果。用户感知到的加载时间没变，但交互响应从"有点粘手"变成了"跟手"。

第三方脚本被他当成了需要特别许可的访客。Google Analytics、Umami统计全部延迟到交互后加载，且用async属性避免阻塞解析。他甚至写了个自定义hook来监控这些脚本的加载时机，确保它们永远不会出现在关键路径上。

部署环节的最后一刀

代码层面的优化做完，基础设施成了新的战场。

他选的托管方案主打边缘节点+HTTP/3。HTML文档从最近的节点直出，TTFB（首字节时间）控制在50ms以内。静态资源全部带immutable缓存头，二次访问直接从浏览器缓存读取。

一个容易忽略的细节：他关闭了Brotli压缩，改用Zopfli预压缩。理由是Brotli的动态压缩会消耗边缘节点CPU，而Zopfli虽然构建慢，但压缩率更高且零运行时开销。这个选择让他的JS bundle又小了4%。

100分的代价是放弃"方便"。他不能用现成的UI库，因为哪怕只用一个Button组件也要拖进整套样式系统。他不能随意npm install，每个依赖都要过一遍bundlephobia看体积成本。他甚至放弃了React DevTools的生产环境支持，因为那会增加几十KB的代码。

有人在他的GitHub评论区留言："这些优化在大型团队里很难落地吧？"

「这确实是个个人项目才能做到的偏执，」CrisisCore-Systems回复，「但其中的原则——控制关键路径、延迟非必要内容、把主线程还给用户——放在任何规模都成立。」

另一个开发者跟帖说，这篇分享的价值在于"把性能从模糊的前端神话变成了可叠加的 deliberate choices"。