引言

博客搭建这么久了发现并没有进行过优化，首页虽然打开速度勉强能够接受，但是 github 和 coding 提供的空间有限，是时候优化一下了。基本思路是采用 gulp 进行代码的压缩等。

分析

在浏览器输入url到页面打开，都做了些什么？

浏览器里输入网址 https://zsyyblog.com
浏览器查找域名对应的IP地址
这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
浏览器向web服务器发送一个HTTP请求
服务器的永久重定向响应（从https://zsyyblog.com 到 https://www.zsyyblog.com）
关于为什么要重定向。其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像 https://zsyyblog.com 和 https://www.zsyyblog.com ，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。
浏览器跟踪重定向地址，发起GET请求
服务器”处理”请求，向浏览器发回一个HTML响应
浏览器解析显示HTML
浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
浏览器发送异步请求（ajax请求等）

从上面的过程可以看出，其实大部分过程我们是控制不了的，我们只能从浏览器端入手来找一些可以做的事情。那么，我们可以做些什么呢？

少发送请求
把要加载的js文件（css文件同理）合并成一个（尽量少）文件，则可以向服务器少发送请求，从而减少等待时间。
压缩文件
使用压缩之后的js、css、img文件，同样可以减少请求时间。
Css Sprite
这是css的一项技术，将图片尽可能多的合并成一个图片文件，第一次使用的时候加载这张图片，然后浏览器会缓存下来，其他地方再使用的时候就不需要重新请求了。
js/css位置
css引用建议放在head标签里面；js脚本建议放到body内容的最后，原因：等待js加载或者脚本有错误的时候不会影响html页面的展示。

操作步骤

首先需要安装的 gulp 插件有：gulp-clean-css 、 gulp-uglify 、gulp-htmlmin 、gulp-htmlclean。安装它们并将其加入到 package.json 的依赖中：

1	npm i --save gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean

当然，你的电脑上需要安装有 gulp，这里进行了全局安装：

1	npm i -g gulp

然后在项目的根目录下新建 gulpfile.js 文件，里面一通配置，还是比较简单的，稍微熟悉点 gulp 的都没多大问题：

var gulp = require('gulp');
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

/*压缩CSS*/
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
    .pipe(cleancss())
    .pipe(gulp.dest('./public'));
});

/*压缩html文件*/
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'));
});

/*压缩JS文件*/
gulp.task('minify-js', function() {
  return gulp.src('./public/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
});

gulp.task('default', ['minify-html', 'minify-css', 'minify-js']);