前言

2022年7月12日某时，ElemeCDN确认停止回源，仅可访问之前回源过的资源

至此，几乎所有公开在cn国境内提供免费高速静态资源cdn的厂商的服务全部关闭

不可否认的是，无论ElemeCDN受到打压，亦或者阿里被薅秃了，这家伙确实也是使用着阿里cdn的，在国内访问速度可观

反观在年初被吊销ICP许可的Jsdelivr，在国内前前后后被GFW污染了两三次，访问情况不能说是完全访问不了，但速度真的很不乐观

我们能够依赖的也只有那些愿意做公益的大佬了，虽然回源依旧是Unpkg亦或者Jsdelivr，但最起码部分数据也被国内的cdn缓存了

目前我遇到的解决方案几乎都有在使用ServiceWorker，就比如静态博客接入 freecdn 提升访问速度、欲善其事，必利其器 - 论如何善用ServiceWorker，当然ClientWorker的技术基础也还是ServiceWorker

ClientWorker的作者CYF对ServiceWorker的评价其实很简单ServiceWorker作为前端革命领袖，毫不夸张地被誉为前端黑科技

但是ServiceWorker作为一种前端技术是有学习及试错成本的，如果单单只为了加速个静态网页而学习ServiceWorker我觉得这肯定是不合理的

正文

什么是ClientWorker

引用原作者CYF的话(来自cw官方文档)

ClientWorker是利用规则全局驱动sw的插件
目前涵盖了ServiceWorker的路由拦截、路由劫持、请求/响应（标头、状态、响应主体）修改、缓存调控，允许用户并发（双引擎），并且有一个自定义规则系统，可以自定义规则，拦截请求，修改响应，缓存颗粒化等功能。

如何安装

js
<script>if (!!navigator.serviceWorker) {
    navigator.serviceWorker.register('/cw.js?t=' + new Date().getTime()).then(async (registration) => {
        if (localStorage.getItem('cw_installed') !== 'true') {
            const conf = () => {
                console.log('[CW] Installing Success,Configuring...');
                fetch('/cw-cgi/api?type=config')
                    .then(res => res.text())
                    .then(text => {
                        if (text === 'ok') {
                            console.log('[CW] Installing Success,Configuring Success,Starting...');
                            localStorage.setItem('cw_installed', 'true');
                            //如果你不希望重载页面，请移除下面五行
                            fetch(window.location.href).then(res => res.text()).then(text => {
                                document.open()
                                document.write(text);
                                document.close();
                            });
                        } else {
                            console.log('[CW] Installing Success,Configuring Failed,Sleeping 200ms...');
                            setTimeout(() => {
                                conf()
                            }, 200);
                        }
                    }).catch(err => {
                    console.log('[CW] Installing Success,Configuring Error,Exiting...');
                });
            }
            setTimeout(() => {
                conf()
            }, 50);
        }
    }).catch(err => {
        console.error('[CW] Installing Failed,Error: ' + err.message);
    });
} else {console.error('[CW] Installing Failed,Error: Browser not support service worker');}</script>

将以上这串代码安放在<head>里面，越靠前越好，当然navigator.serviceWorker.register是异步函数不会阻塞页面加载。
进入ClientWorker Github Release发布页，下载最新版本内容。
解压，将文件夹中cw.js拷出，放在网页服务器下
新建config.yml在其中填写配置

以上内容摘抄至ClientWorker官方文档

判断是否成功安装

这里可以在域名后方加上[/cw-cgi/hello](/cw-cgi/hello)查询cw是否正常安装

如果返回的是Hello ClientWorker!则代表cw正常安装

配置ClientWorker

这个可以参考ClientWorker官方文档

而我的配置则是

yaml
name: TNXGClientWorker
catch_rules:
  - rule: _
    transform_rules:
      - search: tnxg.loyunet.cn # 匹配tnxg.loyunet.cn，跳为/blog.tnxg.top/
        action: redirect
        redirect:
          to: blog.tnxg.top
          status: 301
      - search: _
        replace:
          - _
          - gcore.blog.tnxg.top
          - vercel.blog.tnxg.top
        action: fetch
        fetch:
          status: .*
          engine: parallel
          preflight: false # false
          timeout: 30000
          delay: 4000
      - search: \/([^\/.]+)$ # 匹配/path，跳为/path/
        action: redirect
        redirect:
          to: /$1/
          status: 301
  - rule: ^(http|https)\:\/\/(cdn|test1|quantil|fastly|gcore)\.jsdelivr\.net\/npm|^(http|https)\:\/\/unpkg\.com|^(http|https)\:\/\/npm\.elemecdn\.com # 并发npm资源
    transform_rules:
      - search: _
        replace:
          - https://npm.elemecdn.com
          - https://assets.tnxg.whitenuo.cn/proxy/npm
          - https://npm.onmicrosoft.cn
          - _
        action: fetch
        fetch:
          status: 200
          engine: parallel
          preflight: false
          timeout: 3000
          cache:
            expire: 1000*60*60*12
            delay: 300
  - rule: ^(http|https)\:\/\/(cdn|test1|quantil|fastly|gcore)\.jsdelivr\.net\/gh # 并发github资源
    transform_rules:
      - search: _
        replace:
          - https://assets.tnxg.whitenuo.cn/proxy/gh
          - https://jsd.onmicrosoft.cn/gh
          - _
        action: fetch
        fetch:
          status: 200
          engine: parallel
          preflight: false
          timeout: 3000
          cache:
            expire: 1000*60*60*12
            delay: 300
  - rule: ^(http|https)\:\/\/(i0|i1|i2|i3|s1|s2|s3)\.hdslb\.com # 匹配B站资源链接
    transform_rules:
      - search: _ # 多cdn并发
        replace:
          - https://s1.hdslb.com
          - https://s2.hdslb.com
          - https://s3.hdslb.com
        header:
          referrer: no-referrer # 更改引用策略
        action: fetch
        fetch:
          engine: parallel
          status: 200
          preflight: false
          timeout: 30000
          delay: 4000
  - rule: (?<=^(http|https)\:\/\/assets\.tnxg\.whitenuo.cn/(.*))\.jpg$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .jpg?fmt=webp
        replacein: url
        replacekey: .jpg
        action: fetch
        fetch:
          expire: 1000*60*60*24*365 #CDN默认缓存一年
  - rule: (?<=^(http|https)\:\/\/assets\.tnxg\.whitenuo.cn/(.*))\.png$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .png?fmt=webp
        replacein: url
        replacekey: .png
        action: fetch
        fetch:
          expire: 1000*60*60*24*365 #CDN默认缓存一年
  - rule: (?<=^(http|https)\:\/\/assets\.tnxg\.whitenuo.cn/(.*))\.jpeg$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .jpeg?fmt=webp
        replacein: url
        replacekey: .jpeg
        action: fetch
        fetch:
          expire: 1000*60*60*24*365 #CDN默认缓存一年
  - rule: (?<=^(http|https)\:\/\/assets\.tnxg\.whitenuo.cn/(.*))\.gif$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .gif?fmt=webp
        replacein: url
        replacekey: .gif
        action: fetch
        fetch:
          expire: 1000*60*60*24*365 #CDN默认缓存一年
  - rule: (http|https)\:\/\/(.*)\/prism\/(.*)\/themes\/prism\-prism\-vsc\-dark\-plus.min\.css$ # 匹配xx/prism/xxx/themes/prism-prism-vsc-dark-plus.min.css
    transform_rules:
      - search: (http|https)\:\/\/(.*)\/prism\/(.*)\/themes\/prism\-prism\-vsc\-dark\-plus.min\.css$ # 寻找 xx/prism/xxx/themes/prism-prism-vsc-dark-plus.min.css的内容
        replace: https://cdn.staticfile.org/prism-themes/1.9.0/prism-vsc-dark-plus.css
        action: fetch
        fetch:
          engine: fetch
          status: 200
          preflight: false
          expire: 1000*60*60*24

关于我配置的最新内容都可以在Config.yaml找到

后面的那些是我给dogecloud-oss写的webp自适应内容

当我把这配置发出去的时候CFY就表示

我寻思Safari这个玩意还有人用？我眼里(Safari=IE)

咳咳，问题不大，反正我不用Safari我也看不到会出什么bug ~~（掩耳盗铃）~~

一些别的用法

~~应该可以尝试使用cw修改header头来使某些以校验referrer的网站的防盗链失效~~
没啥鸟用，cw无法修改referrer信息，但是可以将流量转发到没有防盗链的资源链接上

yaml
  - rule: ^(http|https)\:\/\/(i0|i1|i2|i3|s1|s2|s3)\.hdslb\.com # 匹配B站资源链接
    transform_rules:
      - search: _ # 多cdn并发
        replace:
          - https://s1.hdslb.com
          - https://s2.hdslb.com
          - https://s3.hdslb.com
        header:
          referrer: no-referrer # 更改引用策略
        action: fetch
        fetch:
          engine: parallel
          status: 200
          preflight: false
          timeout: 30000
          delay: 4000

结语

善待公益项目，每个开发者都是普通人

jsd反代(回源)

https://cdn.bilicdn.tk/
https://jsd.onmicrosoft.cn/
https://jsd.8b9.cn/
https://cdn1.tianli0.top/

我自己写的项目就不放出来了，回源是我自己的服务器，挺慢的

Hexo博客优化？不如尝试ClientWorker

前言

正文

什么是ClientWorker

如何安装

判断是否成功安装

配置ClientWorker

一些别的用法

结语

加载中...