前端性能优化篇之文件资源压缩合并

前端性能优化篇之文件资源压缩合并

【方法】： 资源压缩合并
【目的】：① 减少HTTP请求数；② 减小HTTP的请求大小；

优化方式：

• html 压缩、css 合并和压缩、js 的合并和压缩、图片合并压缩。
• 合并图片（精灵图/雪碧图:css sprites）、CSS和JS文件合并、CSS和JS文件压缩
• 图片较多的页面也可以使用 lazyLoad 等技术进行优化。

主要包括这些方面：html 压缩、css 压缩、js 的压缩和混乱和文件合并。
资源压缩可以从文件中去掉多余的字符，比如回车、空格。

一、html 压缩

html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格、制表符、换行符、注释，多余的属性等(不同压缩方式有区别)；

1. 使用在线网站进行压缩（如果只有简单的几个页面，推荐使用）;

https://www.baidu.com/s?wd=html%20在线压缩

2. 通过编辑器压缩

多数编辑器都是可以安装扩展程序的，通过安装压缩代码的相关模块，就可以在编辑器直接使用；

3. 通过脚手架（gulp,webpack,grunt等）

https://www.npmjs.com/package/html-minifier

4. 后端模板引擎渲染时压缩

当大家使用ejs、jade、swig 模板的时候可能会放弃压缩，直接通过express或者koa等渲染，在渲染前最好将拼接好的模板进行压缩，否则会惊现很多空格和换行。可以通过中间件，或者自己写简单的正则处理下。

二、css压缩

1. 使用在线网站进行压缩

2.编辑器压缩

3. gulp合并压缩

通过gulp将多个css合并成一个css文件，并压缩；
gulp插件地址： https://gulpjs.com/plugins/

gulp压缩css npm包：

• https://www.npmjs.com/package/gulp-clean-css
• https://www.npmjs.com/package/gulp-mini-css

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;

转载请注明链接地址。

如有疑问请留言。