注:该篇文章已与我的个人博客同步更新。欢迎移步https://cqh-i.github.io/体验更好的阅读效果。
写在前面
自己博客插件加多了之后,感觉访问速度慢了些, 找了一些优化方法
- 少发送请求
把要加载的js文件(css文件同理)合并成一个(尽量少)文件,则可以向服务器少发送请求,从而减少等待时间。(前端不是很懂,太麻烦了,我只采用压缩文件这个方法) - 压缩文件
使用压缩之后的js、css、img、html等静态资源文件,同样可以减少请求时间。(虽然html文件压缩对小网站意义不大,详见HTML代码到底该不该压缩, 但还是压一压吧TuT) - js/css位置
css引用建议放在head标签里面;js脚本建议放到body内容的最后,原因:等待js加载或者脚本有错误的时候不会影响html页面的展示。
这里顺便说我的一点教训, 在给自己的博客添加或测试各种插件时,不保证在不同版本以及不同系统一定能成功,一定要做好备份, 备份, 备份 !即使那个插件把自己博客弄崩溃了, 我们还是能从备份中恢复过来, 更可以大胆地去做尝试了.
使用Gulp优化
压缩静态资源无非就是减少请求时间, 加快响应速度。
Gulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass、less)、压缩、测试;图片的压缩;浏览器自动刷新,还有许多强大的插件可以在这里查找。
安装Gulp步骤
- 进入博客根目录后, 全局安装 gulp:
$ npm install --global gulp
- 实现gulp压缩需要安装以下五个模块
gulp-htmlclean // 清理html
gulp-htmlmin // 压缩html
gulp-minify-css // 压缩css
gulp-uglify // 混淆js
gulp-imagemin // 压缩图片
安装命令: npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
3. 添加系统环境变量, 将步骤1图红框的路径添加进Path中, 注意Users后面是你自己的用户名
4. 重启Git, 在博客根目录下安装开发依赖: $ npm install --save-dev gulp
5. 在博客根目录下创建一个名为 gulpfile.js 的文件,内容如下(我的个人博客是yilia主题, 其他主题文件位置不一定和我一致)
// 引入需要的模块
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');
// 压缩public目录下所有html文件, minify-html是任务名, 设置为default,启动gulp压缩的时候可以省去任务名
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')) // 输出的目录
});
// 压缩css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
return gulp.src(['./public/**/*.png','./public/**/*.jpg','./public/**/*.gif'])
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public'))
});
// 默认任务
/*
gulp.task('default', [
'minify-html','minify-html1','minify-css','minify-js','minify-images'
]);
*/
// gulp 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html','minify-css','minify-js','minify-images'
//build the website
));
这里顺便说一下, 以min.js这样后缀名的文件再次压缩, 可能会出现错误, 所以要将它排除掉
6. 优化之后,然后每次添加文章之后,编译发布之间需要多一个命令来压缩这些文件
hexo clean
hexo generate
gulp default //压缩js、css、img等文件, default是上面gulpfile.js合并任务的任务名
hexo deploy
执行gulp default可以看到压缩比率,压缩期间CPU占用率会很高…
看看相应时间(最好优化前记录一下图片相应的时间等TuT, 我这里只有优化后的, 但是还是可以感觉到快一点的):
Gulp官网:https://www.gulpjs.com.cn/