CompressionWebpackPlugin简单配置及web中gzip的原理

1.基础使用

对于webpack4不能使用太高版本的CompressionWebpackPlugin组件;

npm i compression-webpack-plugin@5.0.1 -D

const CompressionPlugin = require('compression-webpack-plugin')

new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css)?$/i,
        threshold: 10240,
        // 是否删除源码
        deleteOriginalAssets: true
      })

webpack参考文档: https://webpack.docschina.org/plugins/compression-webpack-plugin/#deleteoriginalassets

2.使用说明

1. web使用gzip压缩, 需要浏览器和web容器均支持才可;
2. 对于支持gzip的浏览器, request header中会包含: Accept-Encoding: gzip, deflate,
3. 服务器会根据该参数, 针对访问文件进行 加/解压, 最终写入流中;
4. 服务器响应时会在 response header中添加: Content-Encoding: gzip
5. 当浏览器解析响应时发现该header, 则会进行相关解压操作, 最终呈现给客户