前后端分离(二)

时间:2021-08-24 21:05:40

nginx开启GZIP

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;  (综合考虑小于1K的文件压缩不划算)
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2; (大于2之后压缩效果不明显)
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types application/javascript text/css; (text/html为默认添加, 不开启图片压缩,一方面时间效率问题,另外一面可能破坏图片)

合并

由于采用sea.js进行模块化,所以每个HTML只包含公共的CSS,JS文件以及自身单独的CSS,JS文件,以及用sea.js引入的JS文件,所以文件请求数较少且考虑浏览器可并行下载的能力,故没有必要进行合并。

CSS压缩

使用插件gulp-minify-css

JS压缩

使用gulp-uglify,并排除.pipe(uglify({mangle:{except : ['$', 'require', 'exports']}})) ;并添加内联的source maps,方便线上调试

图片压缩

使用gulp-imagemin,由于压缩图片时间较长,使用gulp-cache进行缓存

文件版本管理

使用gulp-static-hash根据文件的md5自动对css,js添加版本号, 又由于使用了sea.js以及HTML中包含sea.use引入文件,所以使用gulp-replace进行替换

个人博客地址:http://blog.yangqiong.com.cn/qian-hou-duan-fen-chi-er/