webpack打包之文件Gzip压缩与Brotli压缩配置

Gzip简介

zip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。它最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。

我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

对此相关科普注释，顺手安利下：

• 《PNG文件解读(3):图像数据块IDAT细节—PNG压缩与解码编码详解》

• 《Gzip之后继者Brotli浅析之CDN厂商的智能压缩，服务器Brotli设置》

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。

当然WEB服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。

网站开启Gzip的方案

gzip支持，直接nginx上开启很简单

user  andyChou;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
  #启用或禁用gzipping响应。#
  gzip on; 
  #设置用于压缩响应的缓冲区number和size。默认情况下，缓冲区大小等于一个内存页面。这是4K或8K，具体取决于平台。#
  gzip_static on;
  #启用或禁用gzipping响应。#
  gzip_buffers 4 16k;
  #设置level响应的gzip压缩。可接受的值范围为1到9。#
  gzip_comp_level 5;
  #设置将被gzip压缩的响应的最小长度。长度仅由“Content-Length”响应头字段确定。#
  gzip_min_length 100;
  #匹配MIME类型进行压缩，text/html默认被压缩。#
  gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

但是，nginx开启gzip，影响服务器性能。对于原来的php之类的网站，开启这个是比较的好的选择。

但是对于前端打包输出的，应该直接 打包为gzip就好

webpack 开启gzip 压缩，当然，还可以开启比 gzip 体验更好的 Zopfli 压缩详见https://webpack.js.org/plugins/compression-webpack-plugin

npm i -D compression-webpack-plugin --save-dev
npm i -D @gfx/zopfli brotli-webpack-plugin

gzip配置

if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require("compression-webpack-plugin");
    const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
    const zopfli = require("@gfx/zopfli");
    const BrotliPlugin = require("brotli-webpack-plugin");
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
        }),
        new BrotliPlugin({
            test: productionGzipExtensions,
            minRatio: 0.99
        })
    )
}

vue cli 配置也差不多咯

module.exports = {
    configureWebpack: config => {
        const plugins = [];
        const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
        if (IS_PROD) {
            const CompressionWebpackPlugin = require("compression-webpack-plugin");
            const zopfli = require("@gfx/zopfli");
            const BrotliPlugin = require("brotli-webpack-plugin");
            const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
            plugins.push(
                new CompressionWebpackPlugin({
                    algorithm(input, compressionOptions, callback) {
                        return zopfli.gzip(input, compressionOptions, callback);
                    },
                    compressionOptions: {
                        numiterations: 15
                    },
                    minRatio: 0.99,
                    test: productionGzipExtensions
                }),
                new BrotliPlugin({
                    test: productionGzipExtensions,
                    minRatio: 0.99
                })
            );
        }
        config.plugins = [...config.plugins, ...plugins];
    }
};

参考文章：

vue-cli4 全面配置(持续更新) https://staven630.github.io/vue-cli4-config/#gzip

转载本站文章《webpack打包之文件Gzip压缩与Brotli压缩配置》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2020_1215_8590.html