Hexo优化加速

把Hexo托管在GH Pages上,每次full load速度都非常的慢。于是,我deploy到Coding Pages进行对比测试,发现Coding的服务器也全部在境外,速度不如GH且不稳定。

在网上疯狂搜索有关于Hexo加速教程,经过几番折腾,总结几点实用的。

一、删繁就简

去掉一些不必要的功能,关掉了 pace、canvas_lines、tag-icon、跑马线、3D动画等,安心种地!

二、使用CDN加载css、js

三、使用gulp压缩Blog资源

使用gulp压缩Blog静态资源,可以减少文件体积,加快速度。

1.安装相关插件

在这使用taobao cnpm加快安装速度

1
2
# 全局安装gulp
cnpm install gulp -g
1
2
3
4
5
6
7
# 在博客根目录下gulp压缩相关插件
cnpm install gulp --save
cnpm install gulp-minify-css --save
cnpm install gulp-uglify --save
cnpm install gulp-htmlmin --save
cnpm install gulp-htmlclean --save
cnpm install gulp-imagemin --save

为解决出现GulpUglifyError: unable to minify JavaScript

1
2
3
4
# 安装babel
cnpm install babel-core@6.26.3 --save
cnpm install gulp-babel@7.0.1 --save
cnpm install babel-preset-es2015@6.24.1 --save
1
2
# gulp-babel 取消严格模式方法
cnpm install babel-plugin-transform-remove-strict-mode --save

2.添加gulpfile.js配置文件

gulp -v查看gulp的版本,如果gulp的版本大于等于4.0,新建gulpfile.js复制下面内容,并放置站点根目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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');
var babel = require('gulp-babel');

// 压缩css文件
gulp.task('minify-css', function (done) {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
done();
});

// 压缩html文件
gulp.task('minify-html', function (done) {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'));
done();
});

// 压缩js文件
gulp.task('minify-js', function (done) {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({
//将ES6代码转译为可执行的JS代码
presets: ['es2015'] // es5检查机制
}))
.pipe(uglify())
.pipe(gulp.dest('./public'));
done();
});

// 压缩 public/images 目录内图片(Version>3)
gulp.task('minify-images', function (done) {
gulp.src('./public/images/**/*.*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('./public/images'));
done();
});

//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {
console.log("----------gulp Finished----------");
// Do something after a, b, and c are finished.
});

3.添加.babelrc文件

内容如下,同样放置站点根目录

1
2
3
4
{
'presets': ['es2015'],
"plugins": ["transform-remove-strict-mode"]
}

4.执行gulp

在每次hexo g之后执行 gulp即可压缩

参考