Hexo+Coding搭建自己的博客网站系列4-加速Hexo博客
前言
欢迎浏览我的博客：https://fitz1318.top
当我们创建好Hexo博客后，加载速度问题就需要被重视，在本文中提出了两种不同的加速方案，可以相互补充，让你的博客快如闪电。在这里要感谢reuixy：https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/30/speed-up-hexo.html
本文还参考了这篇文章 https://blog.csdn.net/java_1996/article/details/86499625
加速方案一：利用gulp 4.0实现静态资源压缩
gulp简介
gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
在这里我们主要使用压缩功能
插件安装
- 在站点根目录下使用Git bash 键入命令
npm install gulp - 键入命令
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save安装这些功能模块
gulp-htmlmin // 压缩html
gulp-minify-css // 压缩css
gulp-uglify // 混淆js
- 创建任务
在站点根目录下新建gulpfile.js文件
var gulp = require('gulp');
//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
//压缩css
gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', function () {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
//压缩js 不压缩min.js
gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
//4.0以前的写法
//gulp.task('default', [
// 'minify-html', 'minify-css', 'minify-js'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', function() {
// Do something after a, b, and c are finished.
}));
我在这里遇到ES6和ES5冲突问题，所以没压缩js
- 使用
hexo clean && hexo g && gulp，然后再本地测试：hexo s或者部署：hexo d
加速方案二：InstantClick+hexo-service-worker+hexo-filter-optimize
instantclick简单介绍
在访问者点击一个链接之前，鼠标会悬停在链接上面，这两个事件之间通常有200ms~300ms的间隔，InstantClick 利用这个时间间隔预加载页面。这样当你点击页面的时候，其实页面已经加载到本地了，呈现当然也就会很快。
instancklkick使用
①去github上下载最新版instancklkick.js地址为https://github.com/dieulot/instantclick/tree/master/src，或者从我的百度云盘下载：链接：https://pan.baidu.com/s/1KY3oNuYarOxVmvp3-BeI9g
提取码：cp8w
②然后保存在~/blog/themes/next/source/js/src/下，并在~/blog/themes/next/layout/_layout.swig里添加代码
+
+