Storybook项目在Cloudflare Pages部署时的无限请求问题解析

问题现象

在Storybook 8.5.1版本中，当开发者将构建后的静态站点部署到CDN平台时，会出现一个严重的性能问题。浏览器控制台会显示大量404错误，这些错误源于浏览器不断尝试加载一系列不存在的JavaScript模块文件。这些请求路径呈现出一种特殊的嵌套模式，例如"/sb-preview/sb-addons/essentials-backgrounds-5/sb-addons/storybook-core-core-server-presets-0/sb-addons/essentials-viewport-6/sb-addons/links-1/manager-bundle.js"等。

问题根源

经过技术分析，这个问题主要由两个因素共同导致：

1. 文件缺失：在Storybook 8.5.1的生产构建中，sb-preview/runtime.js文件被移除，但HTML模板中仍然保留了对它的引用。这个变更源于Storybook项目的一次优化提交。

2. SPA回退机制：CDN平台作为单页应用(SPA)托管平台，当请求的资源不存在时，默认会返回index.html内容。这种设计本意是支持前端路由，但在这种情况下却导致了恶性循环。

技术原理

当浏览器加载Storybook页面时，会按照以下流程触发问题：

1. 浏览器解析HTML文档，发现需要加载sb-preview/runtime.js
2. 由于该文件不存在，CDN返回index.html
3. 浏览器将HTML作为JavaScript模块解析，导致MIME类型错误
4. 错误处理过程中，某些浏览器(特别是Chrome)会重新尝试加载
5. 这个过程循环往复，最终导致浏览器发起数万次请求

解决方案

Storybook团队在8.6.0版本中已经修复了这个问题。开发者可以通过以下步骤解决：

1. 升级Storybook到最新版本：

npx storybook@latest upgrade

2. 如果暂时无法升级，可以手动添加一个空的sb-preview/runtime.js文件到构建输出目录中

经验总结

这个问题给我们的启示是：

1. 生产环境构建的完整性检查非常重要，特别是当移除某些看似"无用"的文件时
2. SPA托管平台的回退机制需要谨慎处理，可能需要在服务器配置中添加特定规则
3. 浏览器对模块加载失败的处理方式存在差异，Chrome表现尤为严格

对于前端开发者来说，部署后务必检查浏览器控制台，及时发现并解决这类隐蔽的性能问题。