加速

我们的博客不加速是不行的……

CDN加速

我们的博客加载字体会非常慢。这是因为在国内不能访问 Google，从Google加载就会慢得1p。

在主题配置文件找到：

1 2	# Uri of fonts host. E.g. //fonts.googleapis.com (Default) host:

将 host 后面打个空格输入//fonts.lug.ustc.edu.cn

当然还有一堆效果不明显的CDN加速。效果不明显就不必要加了。当然如果你追求极致去加一下也没事，至少不会拖慢加载速度。

使用gulp压缩静态文件

在博客根目录下执行npm install gulp -g。

再依次执行：

npm install gulp --save
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save

在站点根目录下添加gulpfile.js文件。内容如下：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

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'))
});
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}),
        imagemin.mozjpeg({'progressive': true}),
        imagemin.optipng({'optimizationLevel': 7}),
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
gulp.task('default',gulp.series(gulp.parallel('minify-html','minify-css','minify-js','minify-images')));

每次hexo g后执行命令gulp即可。它能有效压缩静态文件加快博客加载速度。

neat是hexo自带的插件。由于是”量身定制”的，它压缩后的文件的大小要小一点（~~其实小不到哪儿去，差不多~~），并且不需要输入额外命令，只需要按照原来的hexo三连即可。但是它不支持压缩有 $\LaTeX$的文章……

使用Hexo自带插件加速

在站点根目录下npm install hexo-service-worker hexo-filter-optimize --save。

在站点配置文件末尾添加

# 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

它能显著提高网站速度。

fastclick

在主题配置文件找到

1
2
3

# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-fastclick
fastclick: false

将fastclick改为true即可。

InstantClick

这个纯属黑科技。加了会让你的网站速度有质的飞跃。

网上很多资料不再赘述。但是这个插件是有副作用的：

与 FancyBox、Google Analytics 等等不兼容。还有很多与它不兼容的东西。
如果你大费周折搞定了上述问题~~反正我是没搞定~~那么恭喜你。但是注意，它的原理是当鼠标悬停在链接上时预加载。显而易见这样会带给服务器很多额外负担。极端情况下，用户的鼠标在一堆链接上滑来滑去就很那啥。当然可以通过一些设置来减缓这个问题。

如果你成功加上了真的加了这个插件，你的网站速度会相当惊人。但是对于一般的，对速度要求不严苛的用户上述两个优化就足够了。

深度美化

继续咕咕咕……

zqs`s blog

从零搭建自己的hexo博客（三）：加速与深度美化

加速