在jsFiddle的React项目中如何避免CDN资源重复调用？

嘿，这个问题我太熟悉了——在jsFiddle里反复调试React代码时，每次运行都看到浏览器请求那些CDN资源，确实有点闹心。不过有几个办法能帮你减少甚至避免这些额外请求：

1. 利用浏览器的原生缓存（最省心的方案） #

大多数主流CDN（包括React官方使用的CDN）都给资源配置了长期缓存策略。你可以打开浏览器开发者工具的「网络」面板，查看这些资源的响应头：如果有Cache-Control: max-age=31536000这类设置（意思是缓存一年），那浏览器其实已经把这些资源存在本地了。

你看到的“重新请求”往往只是浏览器发了个轻量的验证请求，并不会重新下载完整资源——此时网络面板里的状态码会是304 Not Modified或者200 OK (from disk cache/memory cache)，这说明资源是从本地缓存读取的，没有消耗额外带宽。

2. 优化jsFiddle的资源引入方式 #

直接在HTML里写CDN链接有时候会让浏览器的缓存逻辑变得混乱，你可以试试：

• 把React、Babel等依赖添加到jsFiddle的「External Resources」面板（页面左侧的菜单里找），而不是写在HTML标签里。jsFiddle会对这里的资源做专门的缓存处理，减少重复请求的概率。
• 确保你用的CDN链接是带固定版本号的（比如https://unpkg.com/react@18.2.0/umd/react.development.js），不要用不带版本的动态链接——版本固定的URL能让浏览器更稳定地缓存资源，不会因为版本更新触发意外的重新下载。

3. 进阶方案：切换到本地开发环境 #

如果你的项目已经有一定规模，频繁在jsFiddle里调试确实不太高效。可以考虑把项目迁移到本地：

• 用create-react-app或者Vite这类工具快速搭建本地开发环境，它们会把React、Babel等依赖下载到本地的node_modules文件夹里。
• 本地开发时，所有依赖资源都是从本地磁盘读取，完全不需要网络请求，而且热更新功能能让你修改代码后立刻看到效果，比jsFiddle的刷新模式流畅得多。

小提醒 #

不要随意修改CDN资源的URL，浏览器的缓存是基于URL的——哪怕只是加个无关的参数（比如?t=123），浏览器都会认为是新资源，重新发起完整下载请求。

内容的提问来源于stack exchange，提问作者aniket aniket