因为机器的带宽目前只能1M,为了节省这宝贵的带宽资源,只能尽力去优化资源的加载。今天下午便尝试了nginx的gzip配置和gulp压缩资源,效果显著,哈哈。
(我的配置参考了这篇博文)
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
则表示配置成功
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文件则瘦了下来,哈哈。
感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/5.html
邮箱:glowrypauky@gmail.com
QQ: 892413924