AnalogJS 升级至v1.15.0+后Lighthouse CI出现NO_FCP错误分析

在Web前端开发中，性能监控工具Lighthouse CI是开发者常用的重要工具之一。近期有开发者反馈，在将AnalogJS框架从v1.14.1升级到v1.15.0及以上版本后，Lighthouse CI出现了"NO_FCP"错误，本文将深入分析这一问题的原因及解决方案。

问题现象

开发者在升级AnalogJS及相关依赖后，Lighthouse CI工具开始报错：

Runtime error encountered: The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)

这个错误表明Lighthouse无法检测到页面的首次内容绘制(FCP)，通常意味着页面没有在预期时间内渲染出可见内容。

环境配置

受影响的项目使用了以下关键依赖：

• @analogjs/content 1.15.1
• @analogjs/router 1.15.1
• @analogjs/platform 1.15.1
• marked相关库升级到最新版本

Lighthouse CI配置中检查的URL包括首页和博客页面，设置了FCP的性能警告阈值。

问题排查过程

1. 版本对比分析：v1.15.0的主要变更是升级了marked相关包，用于内容处理
2. 构建配置检查：项目使用了基于Webpack的旧构建模式(--mode)而非推荐的--configuration标志
3. 本地重现尝试：官方团队创建了测试仓库但无法重现问题

根本原因

经过深入排查，发现问题并非直接由AnalogJS升级引起，而是由于项目使用了过时的构建配置方式。在v1.14.x及以下版本中，这种配置方式尚能正常工作，但在v1.15.0+中不再兼容。

解决方案

开发者需要将项目构建配置从：

--mode production

更新为推荐的：

--configuration production

这种变更确保了构建过程使用正确的配置方式，从而使Lighthouse CI能够正确检测页面内容。

经验总结

1. 框架升级时，除了关注直接依赖变更外，还应检查构建工具的兼容性
2. 性能监控工具报错时，需要从构建过程和运行时环境多方面排查
3. 及时跟进框架推荐的最佳实践，避免使用过时的配置方式

这个问题提醒我们，在技术栈升级过程中，全面检查所有相关配置的重要性，特别是那些"曾经能用"但非官方推荐的配置方式。