Polyfill.io服务近期缓存问题解析与解决方案

问题背景

近期Polyfill.io服务用户报告了一个关键问题：当使用不带版本号的Polyfill脚本URL时，服务返回的polyfill内容与预期不符。具体表现为：

1. 现代浏览器本应获得空响应（因为不需要polyfill），却收到了大量polyfill代码
2. 某些特定功能的polyfill（如Object.fromEntries）在应该被注入时却缺失
3. 响应头中的useragent_normaliser值与实际用户代理不匹配

问题分析

这个问题首次出现在2024年2月24日左右，与Polyfill.io服务的域名转移时间点吻合。核心问题在于CDN缓存机制出现了异常：

1. 缓存污染：CDN节点缓存了错误的用户代理匹配结果，导致后续请求都返回了基于错误用户代理（如IE 11.0.0或iOS Safari 11.0.0）的polyfill集合
2. 版本缺失的副作用：不带版本号的URL本应根据浏览器特性动态返回适当polyfill，但缓存问题导致这一机制失效
3. 缓存清除不彻底：即使添加了版本号参数，某些CDN节点可能仍保留着错误的缓存

影响范围

这个问题影响了所有使用以下形式URL的用户：

• https://polyfill.io/v3/polyfill.min.js
• https://cdn.polyfill.io/v3/polyfill.min.js
• 带有features参数但不带version参数的URL

解决方案

临时解决方案

1. 添加版本号参数：在URL中明确指定版本号，如： https://polyfill.io/v3/polyfill.min.js?version=3.111.0

2. 添加空查询参数：在URL末尾添加问号强制刷新缓存： https://polyfill.io/v3/polyfill.min.js?

长期建议

1. 始终指定版本号：在生产环境中应该始终使用带版本号的URL，这可以确保polyfill行为的稳定性
2. 监控polyfill服务：建立对polyfill服务响应的监控机制，及时发现异常
3. 考虑自托管：对于关键业务，可以考虑自托管polyfill服务

技术原理深入

Polyfill.io服务的工作原理是根据User-Agent头信息动态生成适合当前浏览器的polyfill包。当请求到达时：

1. 服务端解析User-Agent
2. 匹配浏览器能力数据库
3. 生成只包含必要polyfill的响应
4. 通过CDN缓存响应以提高性能

本次问题的根源在于CDN缓存了基于错误User-Agent的响应，导致后续所有请求（无论实际User-Agent如何）都返回相同的错误polyfill集合。

最佳实践

1. 版本固定：所有生产环境URL都应该包含明确的版本号参数
2. 特性明确：使用features参数明确列出所需polyfill，而不是依赖default
3. 备用方案：为关键polyfill准备本地备用方案，防止CDN问题影响业务
4. 及时更新：定期检查并更新使用的polyfill版本

总结

这次事件提醒我们依赖第三方CDN服务时需要谨慎。虽然Polyfill.io提供了便利的动态polyfill服务，但任何基础设施都可能出现问题。通过采用版本固定、特性明确等最佳实践，可以最大程度地降低这类问题对业务的影响。对于已经受到影响的项目，建议立即添加版本号参数并联系服务维护者清除错误缓存。