我更新了博客看板娘 - wuuconix's blog

背景

最近博客的图片用上了又拍云CDN，网站加载速度快了不少。网站整体在1~2s之间就能完成加载，除了我的shizuku看板娘。

平常加载她需要6~7s的时间，而且每次切换页面，比如进入文章之类的操作，这个加载过程还会再进行一次，让人等的难受。

下图红色框起来的区域就是她的加载过程，我们看到，她从2s开始加载，一直加载到了6s。

经过测试，我发现是我用的hexo插件 hexo-helper-live2d 出了问题。它把看板娘的静态资源都放在unpkg.com上供用户访问。然而这个cdn在国内的延迟很大。

以下是unpkg和jsdeliver的对比。

可以看到同样是国外cdn的jsdelivr 在国内许多城市的延迟在100ms以内，而unpkg则几乎全部接近200ms。

然后更离谱的情况发生了，我发现 hexo-helper-live2d 这个项目在github已经归档了，已经变成只读的了。

用着一个已经被遗弃的项目，加载速度能快就有鬼了2333

live2d-cdn的创建

在github简单搜了一下，目前比较流行的live2d项目是 stevenjoezhang/live2d-widget。

里面包含两种得到资源的方式。

1. 利用 fghrsh/live2d_api 在自己服务器上跑一个php程序当后端接口。称为api方式。
2. 指定url链接，直接获取看板娘的需要静态资源。一般我们都会把资源放在cdn上获取最大速度，称为cdn方式。

大学以来CTF的经历让我对php的印象不是很好，而且个人认为没有必要用后端接口，看板娘需要的就是它的静态资源文件，cdn方式完全可以得到目的。

于是我便简单魔改了一下代码，删除了原项目中 使用api的代码。

然后原项目因为怕涉及到版权问题，没有给live2d的模型。在找了一圈后，我发现 imuncle/live2d 这个仓库里面提供了许多模型。

看了100多个模型，最后选择了小埋，我便把模型直接放到仓库里了。经过一番代码的调整，最后这个项目就完成了。

wuuconix/live2d-cdn: 自用。仅包含cdnPath的live2d-widget。内置模型。 (github.com)

效果展示

可以看到，现在整个网页包括小埋的加载都只用了2.2s。十分迅速。

而且由于 stevenjoezhang/live2d-widget 的创新，给看板娘加上了waifu-tool。

当鼠标指针移动到她身上的时候会出现一些功能按键。大家自己体验吧2333。实际效果很赞。