大众点评M站Qwik.js重构：优化站外体验的全方位技术革新

大众点评M站作为公域流量的引流入口，其核心页面的性Neng表现直接影响着用户体验和流量转化效率。针对M站旧版架构存在的首屏加载慢、维护成本高等问题，大众点评增长团队引入Qwik.js进行了核心页面的重构，实现了技术优化、体验升级和业务增长的完整闭环。本文将深入剖析本次重构的技术选型、原理及落地细节，分享前沿框架在站外场景的实践经验。

其性Neng表现存在上限。SvelteKit的学习成本稍高，而Qwik作为新兴框架，尽管生态尚不完善，但其独特的“可恢复性”设计和极低的首屏资源体积，使其成为实现性Neng破局式提升的Zui佳选择。

Qwik的核心设计理念是“跳过水合，直接恢复交互”，其底层基于Resumability。这一理念使得Qwik在服务端不仅渲染静态HTML，还序列化组件状态、事件绑定等信息并嵌入HTML，客户端无需重新执行组件逻辑，仅在用户触发交互时按需加载极小的交互代码片段，从根源上消除了水合过程。

Resumability的核心是：HTML不再只是“骨架”。与传统SSR方案相比，Qwik的HTML包含了应用状态的完整序列化存储，使得客户端Ke以直接恢复交互，无需重新执行应用程序逻辑。

以商户详情页为例，我们采用Qwik.js进行了重构。为了平衡TTFB与内容完整性，我们对页面信息进行了分级加载：POI基础信息定义为L0级数据，高优先级加载；推荐菜、菜单等信息为L1级数据，按需加载。通过接口聚合和服务端渲染，确保用户打开即见，Zui大化提升首屏感知速度。

为了充分发挥Qwik的性Neng优势，我们进行了全链路优化与工程化适配：

静态资源优化针对图片资源，采用AVIF、WebP、JPG多种格式，根据用户设备兼容性分级展示，降低LCP时间。

CSS内联与懒加载将首屏核心CSS内联至HTML中，避免CSS加载阻塞首屏渲染；次屏样式跟随模块懒加载。

JavaScript碎片化加载通过useVisibleTask$钩子实现非关键信息的渐进式加载，避免阻塞首屏关键路径。

Tree Shaking极致化借助Vite的Tree Shaking机制，按Zui小必要原则引入第三方依赖，减少冗余代码。

构建与发布流程重构重构构建脚本与流水线服务，实现自定义Adapter下的工程化Neng力和发布流程自动化。

为了确保新架构的稳定性和可用性，我们设计了多层级、可配置、可观测的降级熔断机制，包括SSR接口超时降级、Serverless渲染失败降级至SSG静态产物、以及兼容性问题下的工程权衡，确保在各类异常场景下用户仍Neng获得基础访问体验。

M站核心页面重构后实现了首屏性Neng的跨越式提升和业务价值的高效转化。未来我们计划进一步探索边缘计算渲染、RPC改造优化、优化数据缓存策略等方向，继续推动高性Neng前端页面的开发。

大众点评M站基于Qwik.js的重构实践，充分验证了前沿框架在站外场景的落地价值。通过技术优化和全链路工程化适配，我们实现了用户体验的显著提升和业务增长，为后续重构页面提供了宝贵的经验。希望本文的分享Neng为面临类似挑战的团队提供参考和启发，共同推动前端技术的持续创新与进步。

| 本文系美团技术团队出品，著作权归属美团。欢迎出于分享和交流等非商业目的转载或使用本文内容，敬请注明“内容转载自美团技术团队”。本文未经许可，不得进行商业性转载或者使用。任何商用行为，请发送邮件至申请授权。

| 关注「美团技术团队」微信公众号，阅读geng多技术干货！