可能一直关注我的朋友都知道，最近我大部分空余时间都在捣鼓 Kratos-plus 这个主题，而且得力于AI的助力，更新速度也是非常的频繁，上了许多新功能。
比如前段时间就上了一批新功能，因为主题的静态资源CDN是jsDelivr，这个CDN好用是好用，唯一的缺点就是国内访问速度过于慢了一些，为了提升国内的访问速度，所以把FontAwesome这些从走CDN改成了走主题内置文件加载。
这样正常情况下访问速度是没问题了，字体文件也能很快加载，但是偶然间发现FontAwesome的几个字体文件加起来有两百多k，和其他的网站字体比起来是小了写，但是一个页面用到的FontAwesome图标一共也没几个，基本都是个位数，但是却要加载整个文件包，就很不划算。
所以就做了第一版的优化：按需加载对应的字体包。
FontAwesome免费版支持Solid、Regular、Brands这三种字体，那么我只需要在用到某个字体的时候加载对应的字体文件就好了，这样一来就大大的减少了需要加载的字体文件，甚至我可以人为的控制每个页面全都设置那个类型的字体，来提升整个页面的加载速度。
后来运行了两个版本，我发现这样不行，有时候明明其他字体的图标更加符合我想要的，但是为了页面的加载速度、减少资源加载，却不得不放弃使用，这让我一度很难受。
于是在某次上厕所的时候，灵机一动（果然还是方便的时候最方便），想到了一个新点子。
这个点子的灵感来源于我对评论区UA图标的优化，之前的UA图标是在代码里纯手撸的SVG样式，每次有用到的地方都引一堆的SVG代码，很不优雅，于是我就把SVG代码转成了SVG文件，用img的形式进行引用，哎，这样就感觉很优雅~（自欺欺人选手）
于是在我方便的时候就突然想到，FontAwesome官方有现成的SVG格式的图标，在要用FontAwesome图标的地方，直接使用SVG格式的图标，这样岂不是做到了真正的按需加载，只加载我需要的图标，多余的一个不要！
于是就做了第二版的优化：真正的按需加载（SVG版）。
理论有了，那这事儿做起来就不难。
开搞，做咱们最擅长的事。
由于主题中使用FontAwesome的地方实在太多了，多到我自己都记不清楚，万幸牛马也有自己的小牛马，这里有请Claude Code出场。
小牛马不愧是年轻人，效率就是快，很快就把咱们要做的事情做完了，大体验收了一遍，本牛马表示很满意，前端页面一个FontAwesome字体文件都没加载，极大（破音）的提高了网站的加载速度！
打包上传，放在线上环境看一下。
什么？！主题包到了6M？小意思……前端页面加载的资源少了就行，其他的都是基石，包越大基石越厚重……
在线上（也就是本站）跑了几天，中间修改了几个AI漏掉的地方，优化了一些因为修改带来的样式问题，其他的一切顺利~
看吧，上边嫌弃累赘丢掉的SVG代码，到了这里我得把它当宝贝一样用起来。
没有垃圾的技术，就看你在哪里用了。
除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接
文章评论