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的自动任务运行器， 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
在这里我们主要使用压缩功能

插件安装

1. 在站点根目录下使用Git bash 键入命令npm install gulp
2. 键入命令npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save安装这些功能模块

gulp-htmlmin // 压缩html
gulp-minify-css // 压缩css
gulp-uglify // 混淆js

3. 创建任务
   在站点根目录下新建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里添加代码

+ <script type="text/javascript" src= "/js/src/instantclick.js" data-no-instant></script>
+ <script data-no-instant>InstantClick.init();</script>
</body>
</html>

相信你知道这是什么意思，怎么添加。
去除顶部加载条：在~/blog/themes/next/source/css/_custom/custom.styl后面加下面代码

instantclick {
  display: none;
}

可能会有一些问题，比如与 FancyBox、Google Analytics 等等的兼容问题，解决方法自行查看文档或 Google。
在这里会出现图标不显示的问题，解决方案是在主题全局配置文件/blog/themes/next/_config.yml中搜索fontawesome,然后将其修改为fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css即可解决图标不显示的问题。

安装hexo-filter-optimize和hexo-service-worker

在站点目录下键入命令npm install hexo-service-worker hexo-filter-optimize --save,如果出现安装错误，可参考我的解决方案，链接为：https://blog.csdn.net/Fitz1318/article/details/86556013
然后在站点配置文件blog/_config.yml中后面添加如下代码：

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: true

filter_optimize:
  enable: true
  # remove static resource query string
  #   - like `?v=1.0.0`
  remove_query_string: true
  # remove the surrounding comments in each of the bundled files
  remove_comments: true
  css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # bundle loaded js file into the one
    bundle: true
    excludes:
  # set the priority of this plugin,
  # lower means it will be executed first, default is 10
  priority: 12

至此结束所有工作了。赶快部署查看效果吧。