先前我在文章《前端实现自动切换CDN，让资源高可用》留了一个问题小尾巴：不是JavaScript的内容如何实现高可用？尽管《前端静态资源加载失败自动重新加载解决方案》提供了一种方案，但不够自动化，搭建静态或者WordPress博客对图片的存储处理比较繁琐。最近我找到了一个比较好的方案——FreeCDN，故转载这篇教程，提供自动切换公共CDN的方案。

本文摘自《静态博客接入 freecdn 提升访问速度 - iMaeGoo’s Blog》，有改动，遵循CC-BY 4.0协议。

引言

jsDelivr 备案许可被注销，导致大量静态资源（博客里的图片等）加载失败，遂寻找更稳定的 CDN 替换，但是，替换 CDN 治标不治本。几天后，我在 GitHub 看到了 freecdn 这个项目，很好地解决了这个问题。

项目描述

freecdn 是一个纯前端的 CDN 解决方案，用于降低网站流量成本，同时提高网站稳定性、安全性，并且无需修改现有的业务逻辑。

互联网上有很多免费的公共库 CDN，例如 cdnjs、jsdelivr、unpkg，但哪个最稳定，始终没有明确的答案。

现在你无需纠结这个问题，随意选择即可。freecdn 可根据用户的网络状况，实时切换到合适的 CDN。

本文将会利用 freecdn 自动选择公共库的特性，加速 hexo icarus 站点。

几步接入 freecdn

  1. 修改 themes/icarus/layout/common/head.jsx 文件，在 <head> 后增加一行 <script src="/freecdn-loader.min.js"></script>
  2. 博客根目录运行 hexo clean && hexo g
  3. 运行 npm i -g freecdn
  4. 运行 cd public && freecdn find --save && freecdn js --make
  5. 运行 hexo d 或手动部署博客

如果博客访问正常，你已经成功了一半！打开控制台网络标签，可以看到资源是从 Service Worker 加载的——

进阶

freecdn 大致做了以下事情：

  1. 扫描 hexo 生成的 public 目录中所有文件的 hash
  2. 搜索公共 CDN 数据库，找到可以替换的 CDN 地址，写入清单文件
  3. 生成 freecdn-loader.min.js
  4. 用户访问站点时，加载 freecdn-loader.min.js，安装 Service Worker
  5. Service Worker 拦截网站请求，并转发到速度最快的 CDN

问题来了，由于本站的资源本来就从
CDN（jsd）加载，并不包含在 public 打包结果中，导致只有极少请求利用了 freecdn，大量请求依然走
jsd。若想解决这个问题，只好从 npm 仓库上挨个下载需要的资源，全部合并到自己的仓库管理，好在依赖的第三方资源不多，也就 8
个，半个小时足以搞定。

├─clipboard
│ └─2.0.4
│ └─dist
├─cookieconsent
│ └─3.1.1
│ └─build
├─highlight.js
│ └─9.12.0
│ ├─lib
│ │ └─languages
│ └─styles
├─jquery
│ └─3.3.1
│ └─dist
├─justifiedGallery
│ └─3.8.1
│ └─dist
│ ├─css
│ └─js
├─lightgallery
│ └─1.10.0
│ ├─dist
│ │ ├─css
│ │ ├─fonts
│ │ ├─img
│ │ └─js
│ ├─lib
│ └─modules
├─moment
│ └─2.22.2
│ └─min
└─twikoo
└─1.4.14
└─dist

如果 freecdn 能够扫描 public 中的 CDN 网址，并生成清单文件的话，就不需要这么麻烦了，然而技术实现应该很难吧。