Web前端最全利用gulp优化web页面加载速度(1)，前端应届毕业生面试题

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

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文件和图片。经优化后，博客加载速度得到了显著提升，也算是做了一个不错的优化。

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】