gzip，zopfli及brotli压缩对比，vue配置及服务端实现

最新推荐文章于 2024-06-25 15:56:31 发布

逆风丶大魔王

最新推荐文章于 2024-06-25 15:56:31 发布

阅读量2.9k

点赞数 2

分类专栏： VUE 文章标签： vue nginx node.js javascript

本文链接：https://blog.csdn.net/qq_33290980/article/details/108362453

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在看webpack文档中的compression插件时看到了在gzip下面还有两种压缩方式，zopfli跟brotli。先放上官网链接webpack->compression。
在google上冲了一下浪，大致了解了一下，说是比gzip压缩率更高，压缩率级别是这样的：brotli>zopfli>gzip。

一、gzip，zopfli及brotli压缩前端实现

1.gzip:

代码就不放了，之前写过了。vue-cli4项目初始配置及优化（二）
打包之后gz文件大小如下：在这里插入图片描述

2.zopfli：

启用zopfli压缩，需要额外安装插件

npm i @gfx/zopfli -D

webpack代码:

		// 引入zopfli
		const zopfli = require('@gfx/zopfli');
        // 打包zopfli压缩
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]', // 旧版本为assets，现为filename
          test: /\.js$|\.css$|\.jpg$/,
          threshold: 10240,
          // deleteOriginalAssets: true, // 删除源文件
          minRatio: 0.8,
          algorithm (input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback)
          }
        })

效果如下：
在这里插入图片描述
zopfli压缩后打包的文件格式跟gzip是一样的，压缩率高了一些，小了1kb，因为项目本身不大，大了之后应该还是很香的。
然后因为打包之后文件格式与gzip一致，所以nginx配置方面跟gzip是一样的，在之前的vuecli4配置文章中写过了，也不再写了。

3.brotli:

        new CompressionWebpackPlugin({
          filename: '[path].br',
          algorithm: 'brotliCompress',
          test: /\.(js|css|html|svg)$/,
          compressionOptions: {
            level: 11
          },
          threshold: 10240,
          minRatio: 0.8
        })

效果如下：
在这里插入图片描述
brotli压缩后打包的文件格式为br，相比较gzip跟zopfli，压缩率提高了一大截。也不用额外加入插件,浏览器支持方面说是不支持ie，差不多是最优选择吧。当然，类似的，服务端需要开启brotli压缩，下面讲下服务端nginx如何开启brotli
总结：现阶段brotli是比较好的压缩方式选择，当然也可以同时配置多种压缩方式。但是，zopfli跟gzip属于同种文件格式，好像zopfli会覆盖吊gzip的样子，我就注释掉了，代码如图：
在这里插入图片描述

二、服务端nginx配置brotli压缩：

这个压缩方式在配置方面还是比较麻烦的，emmmm，也不能说麻烦，只是在网上找到的大部分的教程都不够契合，走了很多弯路，网上的教程什么的一般都是yum安装，但是我是ubuntu系统，安装yum一直报什么Unable to locate package yum什么的错误，我搞了好久，诸如此类的错误遇到了一大堆，最后自己结合各类文章一步步摸索终于安装好了。

1.进入tmp文件夹，获取nginx压缩包并解压到tmp目录下

这一步是因为ubuntu系统apt-get安装的nginx没有configuration执行文件，所以需要下载官网的安装，我当时看教程也是一脸懵，找这个configuration找了半天。最后试着下载官网的压缩包解压才发现有这个。

cd /tmp
wget http://nginx.org/download/nginx-1.18.0.tar.gz && tar -xzvf nginx-1.18.0.tar.gz

2.进入tmp文件夹，clone谷歌的ngx_brotli仓库

cd /tmp && git clone https://github.com/google/ngx_brotli.git

3.进入刚克隆下来的仓库目录下，更新子模块，然后进入nginx目录下

cd ngx_brotli && git submodule update --init && cd /tmp/nginx-1.18.0

4. 安装nginx相关依赖

apt install -y libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev

5.执行configuration编译nginx模块编译模块,并将编译好的.so文件移动到nginx安装目录的modules文件夹中。

./configure --with-compat --add-dynamic-module=../ngx_brotli
make modules
cp objs/*.so /etc/nginx/modules

ps:module文件夹是我自己创建的，移动到哪里都可以，写配置文件load的时候路径正确就可以了。

6.编写nginx配置文件，载入module

在nginx.conf头部中加入以下两句:
load_module /etc/nginx/modules/ngx_http_brotli_filter_module.so;
load_module /etc/nginx/modules/ngx_http_brotli_static_module.so;
然后重载nginx即可:

nginx -s reload

nginx.conf文件如图：

在这里插入图片描述
想要根号的管理模块的话，也可以在nginx根目录下创建modules.conf文件，如图

在这里插入图片描述
然后在nginx.conf中载入modules.conf，如图:

在这里插入图片描述

7.编写nginx配置文件，开启brotli压缩

	##
	# Brotli Settings
	##

	brotli on;
	brotli_static on;
	brotli_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript  image/jpeg image/gif image/png;

添加到如图位置：
在这里插入图片描述