【方法】： 资源压缩合并
【目的】：① 减少HTTP请求数；② 减小HTTP的请求大小；
占位图，没错，就是站位的
一、html 压缩
html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格、制表符、换行符、注释，多余的属性等(不同压缩方式有区别)；
1. 使用在线网站进行压缩（如果只有简单的几个页面，推荐使用）;
https://www.baidu.com/s?wd=html%20在线压缩
2. 通过编辑器压缩
多数编辑器都是可以安装扩展程序的，通过安装压缩代码的相关模块，就可以在编辑器直接使用；
3. 通过脚手架（gulp,webpack,grunt等）
4. 后端模板引擎渲染时压缩
当大家使用ejs、jade、swig 模板的时候可能会放弃压缩，直接通过express或者koa等渲染，在渲染前最好将拼接好的模板进行压缩，否则会惊现很多空格和换行。可以通过中间件，或者自己写简单的正则处理下。
二、css压缩
1. 使用在线网站进行压缩
2.编辑器压缩
3. gulp合并压缩
通过gulp将多个css合并成一个css文件，并压缩；
gulp插件地址： https://gulpjs.com/plugins/
gulp压缩css npm包：
4. webpack合并压缩
webpack插件地址：https://github.com/webpack-contrib/awesome-webpack#webpack-plugins
通过gulp将多个css合并成一个css文件，并压缩；
https://github.com/webpack-contrib/mini-css-extract-plugin
三、 图片压缩
图片压缩要谨慎，有条件的话，最好让UI处理，否则UI可能要找你聊聊人生。
1. icon采用(精灵图/雪碧图/css sprites:是同样的东西)
不管是pc、h5还是app，都可能会用到大量的小图（icon），虽然每张图很小，请求一次没有太多的时间，但是浏览器会有并发请求的数量限制，导致几张小图加载结束的时间可能会很长(相对一张图)。
此时，将多个小图放在一张大图上，一次请求回来，大大减少http请求次数。
浏览器并发请求限制见：https://www.jianshu.com/p/65283ca9072f
ps: 尽量使用字体图片代替icon图片！！！
iconfont: https://www.iconfont.cn/
2. 不透明的图片使用jpg
网站中使用到的图片最多的就是jpg和png，但是两种图片格式有明显区别，使用时根据需求考虑使用png还是jpg。
-
jpg
优点：尺寸较小，节省空间；打开速度快
缺点：有损格式，在修图时不断保存会导致图片质量不断降低；不支持透明 -
png
优点：无损格式，不论保存多少次，理论上图片质量都不会受任何影响；支持透明
缺点：尺寸过大；打开速度与保存速度和jpg没法比
在开发中，尺寸比较大的图片（例如背景图片）一般适用jpg格式，减小对内存的占用！
四、开启gzip
个人推荐，无论是怎么处理压缩的，最后都要开启下gzip。
node项目开启方式：
(1) express demo:
const express = require('express');
const app = express();
const compression = require('compression');
app.use(compression());
(2) koa demo:
const koa = require('koa');
const compress = require('koa-compress');
const app = koa();
app.use(compress());
nginx 开启gzip:
#开启和关闭gzip模式
gzip on|off;
转载请注明链接地址。
如有疑问请留言。
网友评论