发表Tech / FrontEnd5 分钟读完 (大约817个字)  次访问

静态博客接入 freecdn 提升访问速度

引言

上周，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 个，半个小时足以搞定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
├─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 网址，并生成清单文件的话，就不需要这么麻烦了，然而技术实现应该很难吧。

编写脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/bin/bash

cd ./public

USER=imaegoo
REPO=imaegoo.github.io
VER=master
files=$(find * -type f ! -path "freecdn-*" ! -name ".*")
list=""

for file in $files; do
  hash=$(openssl dgst -sha256 -binary "$file" | openssl base64 -A)
  list="$list
$hash https://www.imaegoo.com/$file
$hash https://cdn.jsdelivr.net/gh/$USER/$REPO@$VER/$file"
done

freecdn db --import <<< "$list"
freecdn find --save
freecdn manifest --sign
freecdn js --make

静态博客接入 freecdn 提升访问速度

https://www.imaegoo.com/2021/hexo-free-cdn/

作者

iMaeGoo

发布于

2021-12-30

更新于

2021-12-30

许可协议

CC BY 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

哔哩哔哩 Bilibili

归档

目录

最新文章

最新评论

×