文章目录
  1. 1. HTTP协议压缩相关
  2. 2. webpack压缩
  3. 3. nginx压缩
  4. 4. 搭配使用
  5. 5. 常见问题

HTTP协议压缩相关

在 http/1.0 协议中关于服务端发送的数据可以配置一个 Content-Encoding 字段,这个字段用于说明数据的压缩方法;比如
Content-Encoding: gzip

客户端在接受到返回的数据后去检查对应字段的信息,然后根据对应的格式去做相应的解码。客户端在请求时,可以用 Accept-Encoding 字段说明自己接受哪些压缩方法。
Accept-Encoding: gzip

webpack压缩

之前常见的压缩都是由后端服务器发给数据给前端时压缩,前端(如浏览器)接收到压缩文件后,根据压缩算法解压缩文件,webpack压缩是什么意思呢?
现在在使用webpack打包静态资源后,压缩就变成顺便的事了,打包的时候顺便压缩一下是非常合情合理的。先来看一下如何开启webpack压缩吧!

  1. 开启压缩配置config/index.js
1
productionGzip: true
  1. 安装压缩插件
1
npm install --save-dev compression-webpack-plugin
  1. nginx开启静态资源
1
gzip_static on; #开启gzip静态资源

nginx压缩

不管是nginx还是apache都提供了压缩相关的配置,开启即可使用,nginx的配置如下

1
2
3
4
5
6
7
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;

搭配使用

nginx实时压缩太耗时,影响页面相应速度,所以压缩级别不宜设置太大,但是webpack压缩在上线之前所以就没有时间的问题,级别越大越好(默认9),推荐的方式是二者搭配使用

  1. webpack打包并压缩文件,打包好的文件部署到nginx
  2. 用户访问网页,http request header 带上浏览器支持的压缩方式 如:Accept-Encoding: gzip
  3. nginx到部署目录查找目标文件,如有压缩好的文件直接返回,如果没有开始压缩文件,并把压缩后的文件返回,
    http response header 会说明压缩的方法 如:Content-Encoding: gzip

常见问题

  1. 某些文件未压缩
    检查nginx gzip_types配置 ,查看是否有目标文件类型

  2. nginx未返回webpack压缩的文件
    检查是否缺少配置项 gzip_static on; #是否开启gzip静态资源

文章目录
  1. 1. HTTP协议压缩相关
  2. 2. webpack压缩
  3. 3. nginx压缩
  4. 4. 搭配使用
  5. 5. 常见问题