现状
其实访问博客的时候,我觉得速度还是可以的。但是不能满足于现状,首次访问速度差不多在8S左右,所以要通过压缩html,css,js等静态资源,可以减少请求的数据量从而达到优化hexo访问速度的目的,这里主要用到gulp和一些相关的插件来实现。gulp是一个基于Node.js的自动化构建工具,我们可以通过一些gulp插件实现对html,css,js等静态资源的高效压缩。
安装Gulp
以下cmd依次执行即可
1 2 3 4 5 6 7
| cd ~/Github/hexo npm install gulp -g 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
|
配置Gulp
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
| 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-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public')); });
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-js', function() { return gulp.src('./public/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); });
gulp.task('minify-images', function() { gulp.src('./public/demo/**/*.*') .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: false, multipass: false, })) .pipe(gulp.dest('./public/uploads')); });
gulp.task('default', [ 'minify-html','minify-css','minify-js','minify-images' ]);
|
压缩资源
压缩前

压缩log

压缩后

减少了1MB左右的size
部署
1 2 3
| hexo c;hexo g; gulp hexo d
|
性能对比
优化前

优化后
