vlambda博客
学习文章列表

前端代码gzip压缩

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 压缩?

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