前端代码gzip压缩

Posted 2021-04-30 D前端分享

gzip是前端压缩代码文件最简单有效的方法，gzip可以大大压缩（deflate算法）减少代码文件体积，大约可以减少70％以上的文件大小。而且绝大多数浏览器自带解压算法，支持服务器直接使用压缩文件向浏览器传输。

服务器端可以使用动态压缩和静态压缩两种方式，动态压缩即请求时才压缩文件，会有一定的CPU损耗。所以推荐使用第二种静态压缩的方式，即提前压缩好文件，该文件与原文件同目录，文件名为原文件名称（包含后缀名）加.gz。

Nginx 配置

在nginx配置文件中添加开启静态压缩

zip_static on;

添加完后最好先 nginx -t 测试下配置是否可用。

因为nginx一般情况下是没有安装 Gzip Precompression 模块，需要先安装该模块。首先找到 nginx 安装目录，指定 --with-http_gzip_static_module 重新编译安装。

./configure --with-http_gzip_static_modulemake && make install

安装完成后，重新测试配置是否可用。可正常使用后，再 kill nginx进程，重新启动nginx服务。

开启 zip_static 后，对于支持 gzip 的请求，会优先查找使用对应的 .gz 文件。对于不支持 gzip 的请求或没有 .gz 文件的情况，会使用原文件。

webpack 生成 .gz 文件

const CompressionPlugin = require('compression-webpack-plugin');// 在Plugin中配置代码new CompressionPlugin({ filename: "[path][name][ext].gz[query]", algorithm: "gzip",  test: /\.js$|\.css$|\.html$/, threshold: 10240, // 10K minRatio: 0.8})

配置中的属性参数会因版本略有不同，文件属性名这里用的是 filename 也有版本用 asset。[path] 有版本是对应目录，也有版本是目标路径（目录+文件名+后缀）。

相关问答：

图片文件是否可使用 gzip 压缩？

不可以，图片文件有自己的压缩算法，无法再压缩的更小了。