利用hexo搭建好博客之后,发现博客页面加载速度特别慢,这一点在手机端比较明显。关闭了粒子动画效果后,页面加载的速度没有得到明显改善,于是想从其他方面来提升加载速度。而压缩代码则是一个最直接的方式。
压缩html
gulp-htmlmin是一个用于压缩html文件的插件,安装方法如下:
npm install --save-dev gulp-htmlmin
使用方法如下:
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('minifyHtml', function() {
var minifyOptions = {
collapseWhitespace: true, // 折叠html节点间的空白
minifyCSS: true, // 压缩css
minifyJS: true, // 压缩js
removeComments: true, // 去除注释
removeEmptyAttributes: true, // 去除空属性
removeRedundantAttributes: true // 去除与默认属性一致的属性值
};
return gulp.src('src/*.html')
.pipe(htmlmin(minifyOptions))
.pipe(gulp.dest('dist'));
});
这个插件还有很多的配置项,请参考Options Quick Reference。
ps:html文件中可以嵌入js以及css内容,因此该插件支持对html文件中js及css内容的压缩。
压缩css
我之前用过一个gulp-minify-css插件来压缩css文件,不过最近发现它已经被废弃了,取而代之的是gulp-clean-css,安装方法如下:
npm install gulp-clean-css --save-dev
使用方法如下:
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minifyCss', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
gulp-clean-css的配置项挺多的,感觉还是要遇到具体问题,具体分析了。配置项参考clean-CSS。
压缩js
我们可以用gulp-uglify插件来进行js文件的压缩。首先,我们来安装它:
npm install --save-dev gulp-uglify
使用方法如下:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('compress', function (cb) {
pump([
gulp.src('lib/*.js'),
uglify(),
gulp.dest('dist')
], cb);
});
这里用到了一个pump插件,其实不需要它也是完全可以正常压缩js文件的。但是pump插件为我们提供了一个排错的能力,能够打印出压缩js文件过程的具体错误信息,让我们快速定位修改。
ps:gulp-uglify支持一些配置项,请参考Minify options。
压缩图片资源
压缩图片资源也是优化web页面的一个重要方法,而gulp-imagemin插件可以帮我们做到这一点。首先,我们来安装它:
npm install --save-dev gulp-imagemin
经典的用法如下:
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('default', () =>
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
imagemin()也可以传入配置参数,主要的一些配置项如下所示:
…
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}), //优化gif
imagemin.jpegtran({progressive: true}), //优化jpg,jpeg
imagemin.optipng({optimizationLevel: 5}), //优化png
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
}) //优化svg
]))
…
这里有两个单词需要注意一下,interlaced和progressive,有一篇文章介绍了交错扫描和逐行扫描,请大家参考!
本人在利用上述插件来压缩博客public文件夹下的资源时,发现在进行html压缩和css压缩时,出现了一些页面bug,暂未得出原因,留待后续观察,于是暂时放弃了html和css插件压缩,仅使用了gulp-uglify和gulp-imagemin来压缩js文件和图片。经优化后,博客加载速度得到了显著提升,也算是做了一个不错的优化。