VoidCat 博客

如何拯救性能欠佳的网站

2026-08-13T00:00:00Z

为什么要优化

在上一期中，我们在最后放了一张lighthouse，分数为75分，可谓是非常屎。但是啊，我们的可爱ai发现有非常多的优化点啊。所以我们要开始优化了！！！

结果

先看结果就知道有多么伟大了，伟大程度仅次于mojang发布末地更新：

怎么优化

标题都说了是如何，那必须上过程，先叠个甲：此优化方法不一定适用于其他网站，仅供参考。

1.shiki优化

分块

总所周知，我们的shiki是处理代码高亮的，它肯定是要兼容多种语言的，但是这几种语言都在一个chuck，极为缓慢，所以我们要把它切开，分块，wonderful啊，一下子减了~70%实际下载

核心chuck

我们早期的代码写的非常屎，引用了shiki竟然还用了Oniguruma WASM，坏，所以我们要删掉Oniguruma WASM，直接用shiki，直接省下%97！！！

不要老给我加载shiki

我们主页加载了好几个模块，但是6个都含shiki，但是shiki在这时候完全没用，浪费网络资源。所以我们要完全按需加载，速度猛猛变快啊awa

评论区优化

我们的giscus是阻塞加载的，bad啊，必须异步！！！

不要给我依赖这么多

我们的@vueuse/core是直接依赖的，坏，貌似我们的@vueuse/core直接依赖是useless的，so我们要删掉，只通过reka-ui间接引入，虽然这真的能提升速度吗。 ~~就算不能也水点内容awa~~

ai原文

结果

从75分到99分，超级大的进步。 ~~并且没有bug!!!~~ 我们的用户体验能好得多！！！

又迁移了，这次改了啥，又加了啥？？？

2026-07-16T00:00:00Z

这次改了什么？

如你所见，界面完全不一样了，这得益于我们使用的是Tailwind CSS这样的beautiful的css框架。还用了shadcn做组件 ~~，虽然ai味很重就是了~~，虽然这样还是比我手写强我本来就不擅长前端。我们还询问了亿下下ai改进我们的设计，v3版本明显比之前的好看不是吗。

为什么又迁移了？？？

我们为什么要从之前的html迁移到v2呢？当然是看重了vue的易维护性和很多功能都不用手写的便捷。虽然是带来了一点点不便但是总比哪html+js+css老掉牙三件套好几倍。但是，由于我v2初期选框架的错误决定选择了unocss并且没有考虑组件库，后面我尝试引入shadcn并且重写组件却屡屡碰壁。以卡片组件举例（绝对不是因为只有这个组件），新的shadcn组件和之前完全不一样导致很不协调，幸亏没合入主v2分支，那么tm得丑死！并且也是使用魔法嫁接的方法兼容的，就很怪因为shadcn原生只支持tailwind。我们的v2的技术债欠了越来越多导致根本加不了，优化不了还不如重写。我们的v3就是为了重置技术债而生的。

欸，博客系统为什么集成了？

长久以往，我的的各种子功能都是分散在各个子域名的，这一点都不快捷并且有些公开的子域名只有我自己知道（tg.meali.top,tjl.meali.top），所以我准备把所有的集成，首当其冲的便是我们最重要的博客。所以就集成了（绝对不是因为搭多了集成工业系统）。

这次的技术栈又是什么？

我们还是一如既往采用vue,pnpm,vite，这三样还是太权威了。但是由于shadcn的影响，我们的项目成分复杂（是我了），如图所示：，见上文，我使用了shadcn和tailwind，tailwind还是太好用了你们知道吗。整个项目开发几乎没有遇到问题，因为采用了主流选择。

怎么丝滑迁移的呢？

首先，因为他是同一个系列的，so我们新开了v3分支并且吧之前的混乱命名都改成v1,v2。然后，我们进行紧锣密鼓的~~玩终末地~~开发 ~~（非也，实际上是指挥ai然后在后台让ai干活）~~，然后部署在dev.meali.top进行prod测试，然后，终于完善了！！！就把实际上的prod改成了v3分支，就成功了！！！very easy，但是实际上也very easy。呃，总之就是可以取代v2了（实际上v1的很多功能还没有实现owo）

~~最后再看一下lighthouse。坏，回去优化一下。~~

怎么部署这个博客

2026-04-03T00:00:00Z

初始化

方式 1：Github 上直接使用模板

打开 saicaca/fuwari，然后点开下图 Use this template 按钮

然后跟 Github 的流程走，获得了自己的仓库之后 clone 下来。

方式 2：本地创建

随便选一个文件夹，运行 pnpm create fuwari@latest。

第一篇文章

saicaca/fuwari 的 README 里面有一些内容。

还可以根目录运行 pnpm dev，然后打开网页，里面会有几个文章，请自己阅读，这是一些基本教程。

部署

有各种部署方式，这里选 Edgeone Pages 国际版进行讲解，如果不是请自己探索。

本篇所有内容都是建立在你有一个域名接入了 Edgeone 的前提下。

创建 Pages

先推送你本地 git 里面的内容。

打开 Pages 选项卡，选择新建 Pages，并且关联你的 Github 仓库。

自定义域名

打开那个 Page 的域名管理选项卡，点击新建域名，输入你的域名然后跟着 Edgeone 的提示接入。

第114514次迁移我的博客

2026-04-02T00:00:00Z

标题的 114514 次只是夸张，并不代表真实迁移次数。

第一次迁移

最拉的一次，纯 h5 手写，阴到没边，不描述。

第二次迁移

技术栈

为什么弃用

~~tmd~~AnZhiYu 主题很多东西都关不掉并且性能tm特差

你好啊买旧服务器你一天的 Ukncat 啊。你知道为什么这个服务器这么便宜吗。~~tmd~~只用了 6?个月就跑路了，tm不能找高可信度平台吗。导致我攒了1天的网站全没了。还有重新构建 blog 仓库那一天的 Ukncat 啊。~~tmd~~不能备份之前的文章吗！！！ ~~给我 100w！！！~~