修复 cdn.jsdelivr.net 无法访问的问题
由于一些原因,cdn.jsdelivr.net
在一些地区无法访问 (如 issue)。在网站里添加上 jsdelivr-auto-fallback
代码,可以自动检测 cdn.jsdelivr.net
是否可用,
如果不可用时,会自动把所有 js, css, image 的地址切换到其他可用的域名。
比如
fastly.jsdelivr.net
gcore.jsdelivr.net
- 更多
你也可以自己准备一个静态资源服务器,只把网站用到的 js, css, img 文件放进去,和 cdn.jsdelivr.net
保持同样的文件目录结构,相当于 cdn.jsdelivr.net
的一个部分镜像。或者建一个 cdn.jsdelivr.net
的 proxy 服务器。然后把静态资源服务器网址放到列表里。这样的话,在 jsdelivr.net
可用的地区或时候,用 jsdelivr.net
,不可用时,用自己的静态资源服务器。
ex.
const DEST_LIST = [
'cdn.jsdelivr.net',
'fastly.jsdelivr.net',
'gcore.jsdelivr.net',
+ 'static.mysite.xxx',
];
如果可以切换到其他 CDN,建议尽量切换。如果是以下几种情况,可以考虑使用本项目。
- 网站的大部分用户在中国大陆以外,使用
cdn.jsdelivr.net
会更快 - 相信(希望)有一天中国大陆还能正常访问
cdn.jsdelivr.net
- 网站切换到其他 CDN 工作量很大,或无法切换
- 网站的图片在
cdn.jsdelivr.net
上面
- 直接复制 index.js 或 index.min.js 里的内容,加到网站里。强烈建议添加到 head 标签最上面。
- 所有
script
标签加上defer
属性。如果原来有async
属性,可以跳过。这个可以避免pending
状态带来的等待时间,大大提升性能。
如果是 hexo 生成的网站,可以安装 hexo-filter-jsdelivr-auto-fallback 插件,自动添加。
作为用户,你也可以使用本油猴脚本来将网站中的 cdn.jsdelivr.net
替换为可以访问的域名。
- 安装
Tampermonkey
(自行百度) - 前往此处安装脚本: greasyfork
感谢 DreamOfIce 贡献油猴脚本。
- 修改 Greasemonkey 兼容性问题
- 添加一个 TamperMonkey 脚本,使用户可以替换网站中无法访问的域名
- 检测结果保存到 localStorage,下一次加载时,无需检测,直接使用检测结果中的 fallback domain,缩短等待切换时间
- 考虑网络慢的环境,检测连接 timeout 从 1 秒改回到 2 秒,由于保存检测结果,第二次加载时,比之前版本还快
- 从几个可用的域名中,自动选择连接最快的域名 (#5)
- 检测连接 timeout 从 2 秒改为 1 秒,缩短等待切换时间
- 替换内联样式 style 中 url() 中的内容
- 优化代码,缩小代码量
- 为了提升性能,检测方式由
img
标签改成link
标签 (css) - 建议
script
标签都加上defer
属性,可以大大提升性能 timeout
时间由 3 秒改成 2 秒
https://github.com/PipecraftNet/jsdelivr-auto-fallback/issues
- hexo-filter-jsdelivr-auto-fallback - Add jsdelivr-auto-fallback to hexo site automatically
- 用户脚本版 jsdelivr-auto-fallback - 当网站因为使用
jsdelivr-auto-fallback
访问遇到问题时,可以用油猴脚本解决问题 - SW-Racing - 使用 Service Workers 拯救你网站上的 jsdelivr CDN
- freecdn - A front-end CDN based on ServiceWorker
Copyright (c) 2022 Pipecraft. Licensed under the MIT license.