把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
即可压缩
参考