利用 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, 有一篇文章介绍了交错扫描和逐行扫描, 请大家参考!
来源: https://www.2cto.com/kf/201803/732548.html