Hexo博客静态资源加速

点击查看更新记录

更新记录

2020-12-08:内测版v0.01

1. 将优化日记中的简略内容移至本帖。
2. 对原内容进行拓展，讲解具体操作步骤。
3. 拓展jsdelivr，imagine，gulp的使用方法。

2020-12-09:内测版v0.02

1. 描述css的合并方式。
2. 拓展利用defer异步加载自定义第三方js加载顺序。

点击查看参考教程

CDN加速

jsdelivr是一个免费的CDN服务，可以利用它配合github来为页面静态资源提供加速，有效提升资源加载速度。

关于Jsdelivr的使用可以直接观看小康大佬的教程-优雅使用JsDeliver加速文件

图片资源加速

压缩图片

压缩图片分为有损压缩和无损压缩。无损压缩推荐Tinypng，有损压缩推荐imagine。

使用建议:如果没有特别要求，直接使用Imagine进行有损压缩即可。虽然说是有损压缩，但是默认压缩会自主计算压缩程度，一般默认程度就能节省70%空间，且肉眼几乎发现不了图片压缩情况。

lighthouse评测推荐使用webp格式图片毕竟都是自家的标准当然要夹带点私活，但是对webp格式图片的浏览器支持依然没有完全普及，在一些未适配的浏览器上（IE：没错，就是老子还在坚持）可能出现无法查看图片的情况，请酌情使用。

Gulp压缩全站静态资源

gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。（图片文件的压缩效果远远不如上文提到的imagine软件，所以此处不再写使用gulp压缩图片的内容）。

安装Gulp插件：在博客根目录[Blogroot]打开终端，输入：

安装各个下属插件以实现对各类静态资源的压缩。在此高呼卓越科技NB！

为Gulp创建gulpfile.js任务脚本。在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.js,输入以下内容：

在每次运行完hexo generate生成静态页面后，运行gulp对其进行压缩。指令流程如下：

可能出现的bug，毕竟是bug御三家，没点bug都不好意思出来混

部分js经过gulp-babel的压缩加密后，可能无法正常使用，报错一般为提示该js中的某个变量未被声明。最快的解决方案就是干脆不要压缩它，对它设置压缩屏蔽。

此处举例，假设使用gulp压缩后，位于/source/js/example.js无法正常使用。则在[Blogroot]\gulpfile.js中修改js压缩任务的相关配置

以下内容针对第三方魔改方案进行优化适配。原生主题用户无需在意。

合并CSS以减少请求次数

以下内容仅针对butterfly主题。其他主题可以理解原理后进行操作。实际上就是使用@import引入自定义样式。以下内容在Hexo异步加载方案中亦有提及。

将魔改样式整合到index.css文件内，减少对服务器的请求次数。能够节省大量加载时间。

我的做法如下：

在[Blogroot]\themes\butterfly\source\css\路径下新建_custom文件夹，然后把魔改样式的CSS文件拖动进去。文件目录层级可以表示为以下情况：

在[[Blogroot]\themes\butterfly\source\css\index.styl中新增一行代码:@import '_custom/*.css',表示引入_custom文件夹下的所有CSS文件。

如果是使用的外链css，也可以在这里引入。同样是修改 [Blogroot]\themes\butterfly\source\css\index.styl代码,使用@import逐行引入：

这样一来，每个魔改方案的CSS依然可以在独立的CSS文件中找到并修改（如果是手动添加整合的话，只能用注释分割，显然很不利于后续查找修改），而在每次提交时，运行hexo g的过程中就会将所有CSS文件都整合到index.css,可以在主题配置文件的CDN配置项里给index.css加上jsdelivr进一步提升加载速度（注意刷新jsdelivr的缓存）。

样式选择性加载方案：

若是单纯的整合，对于锱铢必较的我来说还是不够的。很多第三方魔改方案中都有涉及侧边栏改造的部分，当我们有一天想要暂时关闭一个侧栏，那么直接修改card_XXXX.enable的值为false，这么做确实可以不加载侧边栏结构了，但是CSS依然是引入的。此处参考butterfly原生主题的方案，可以将那个css转化成styl以后在最上方添加if hexo-config('aside.card_XXXX.enable')的判断，当enable的值为false，自然也就不会加载下方的样式。

例如对侧栏电子钟的样式进行修改,clock.styl文件开头形似如下格式：

注意观察index.styl中使用@import批量引入的写法。要注意将css文件和styl放在不同文件夹。css使用@import '[path]/*.css'引入，而styl则是使用@import '[path]/*'引入

调整第三方JS加载位置

推荐阅读前置教程：

• Hexo异步加载方案
• 基于Butterfly的Pjax适配方案

在魔改过程中，不可避免的要加载诸多的第三方js，为了加快页面编译速度，可以用异步加载以减少HTML阻塞，也可以将多个js文件合并成一个以减少请求次数。但是这两种方法会有个弊端。

例如我在主页面放置了card_artitalk侧栏说说插件，而artitalkkey.js是在inject配置项中全局引入，那么，当我切换到文章页后，card_artitalk的HTML结构不再出现，但是artitalkkey.js却依然引入，连带着让控制台抛出一堆找不到相应HTML结构的报错。

所以此处提供一种思路,将js添加到各自的插件pug下，即可确保js只在有相应页面结构出现的时候才会加载。

还是以card_artitalk为例，首先将修改akritalkkey.js和card_artitalk.js的引入方式：

然后修改card_artitalk.pug,在文件末端添加：

引入顺序注意不要乱。

需要注意的是，由于这里还用可能用到jquery或者vue,可以仿照上面两步添加vue的引入。

注意此处的异步加载标签defer起到的作用。

给artitalk相关js引入项添加defer以后，虽然它们在页面的加载位置早于jquery、vue等依赖项，但是因为加了defer的缘故，它们的执行时间将晚于没加任何异步加载标签的jquery和vue等依赖项。从而保证了js的正确执行顺序。

详情请参阅站内教程：Hexo异步加载方案

TO DO

给静态资源添加jsdelivr以实现CDN加速

对站内图片进行压缩

使用Gulp压缩全站静态资源

合并CSS以减少请求次数

调整第三方JS加载位置