开发总结 — 优化篇(静态资源压缩优化)

作者:杨润炜
日期:2015/12/10 16:04



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

nginx

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

  1. http {
  2. ... # 此处省略n行配置
  3. gzip on;
  4. gzip_min_length 1k;
  5. gzip_buffers 4 16k;
  6. gzip_http_version 1.0;
  7. gzip_comp_level 3;
  8. 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;
  9. gzip_vary on;
  10. gzip_disable "MSIE [1-6].";
  11. include ./servers/*; # 其它配置可放在这个文件夹内
  12. }

2.重启nginx生效配置

  1. # /sbin/nginx -s reload

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

  1. Content-Encoding:gzip

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

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

同样看到

  1. Content-Encoding:gzip

则表示配置成功

gulp

1.安装gulp

  1. npm install -g gulp

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

  1. var gulp = require('gulp');
  2. var cssMin = require('gulp-css');
  3. var uglify = require('gulp-uglify')
  4. // 压缩 css 文件
  5. gulp.task('cssMinfy', function(){
  6. return gulp.src('assets/css/*.css')
  7. .pipe(cssMin())
  8. .pipe(gulp.dest('assets/css/'));
  9. });
  10. // 压缩 js 文件
  11. gulp.task('script', function() {
  12. // 1. 找到文件
  13. gulp.src('assets/js/*.js')
  14. // 2. 压缩文件
  15. .pipe(uglify())
  16. // 3. 另存压缩后的文件
  17. .pipe(gulp.dest('assets/js/'))
  18. })
  19. gulp.task('default', ['cssMinfy', 'script']);

3.在webpack打包后执行

  1. gulp

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

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/5.html
邮箱:glowrypauky@gmail.com
QQ: 892413924