开发总结 — 优化篇（静态资源压缩优化）

因为机器的带宽目前只能1M，为了节省这宝贵的带宽资源，只能尽力去优化资源的加载。今天下午便尝试了nginx的gzip配置和gulp压缩资源，效果显著，哈哈。

nginx

(我的配置参考了这篇博文)
1.首先看看nginx是如何配置以gzip方式加载资源的。
找到nginx下的conf/nginx.conf配置文件，在你的http{}中加入gzip的配置，按如下方式修改：

http {
    ... # 此处省略n行配置
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 3;
    gzip_types text/plain text/xml text/css application/x-javascript application/xml application/xml+rss text/javascript application/ini application/atom+xml application/javascript;
    gzip_vary on;
    gzip_disable "MSIE [1-6].";
    include ./servers/*; # 其它配置可放在这个文件夹内
}

2.重启nginx生效配置

# /sbin/nginx -s reload

3.验证。有两种方式验证：
第一种，打开网站，F12看Network,定位到相应的静态资源，在Response Headers中看到如下显示则表示成功：

Content-Encoding:gzip

第二种,用curl测试Gzip是否成功开启(网址要修改成你自己的)

curl -I -H "Accept-Encoding: gzip, deflate" "http://www.yangrunwei.com/assets/css/index.css

同样看到

Content-Encoding:gzip

则表示配置成功

gulp

1.安装gulp

npm install -g gulp

2.在网站根目录创建gulpfile.js,便填入以下内容：

var gulp = require('gulp');
var cssMin = require('gulp-css');
var uglify = require('gulp-uglify')
// 压缩 css 文件
gulp.task('cssMinfy', function(){
  return gulp.src('assets/css/*.css')
    .pipe(cssMin())
    .pipe(gulp.dest('assets/css/'));
});
// 压缩 js 文件
gulp.task('script', function() {
  // 1. 找到文件
  gulp.src('assets/js/*.js')
    // 2. 压缩文件
    .pipe(uglify())
    // 3. 另存压缩后的文件
    .pipe(gulp.dest('assets/js/'))
})
gulp.task('default', ['cssMinfy', 'script']);

3.在webpack打包后执行

gulp

js与css文件则瘦了下来，哈哈。