我更新了博客看板娘

背景

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

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

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

shizuku加载

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

以下是unpkgjsdeliver的对比。

unpkg

jsdelivr

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

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

archived

用着一个已经被遗弃的项目,加载速度能快就有鬼了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。实际效果很赞。


我更新了博客看板娘
https://wuuconix.link/2022/04/05/live2d/
作者
wuuconix
发布于
2022年4月5日
许可协议