【前端优化】compression-webpack-plugin资源压缩

前端优化之文本资源压缩

基于文本的资源应进行压缩，以尽量减少网络总字节数

• 当浏览器请求资源时，它将使用
  Accept-Encoding HTTP 请求标头来指示它支持哪些压缩算法。

Accept-Encoding: gzip, compress, br

兼容性：
Brotli (br)：不兼容Internet Explorer、Safari 桌面版和 iOS 上的 Safari
GZIP：所有主流浏览器都支持 GZIP，但效率不如 Brotli

• 服务器应返回 Content-Encoding HTTP 响应标头以指示它使用的压缩算法。
  Content-Encoding: br

前端使用compression-webpack-plugin开启Gzip压缩

安装

 npm install compression-webpack-plugin --save-dev

配置

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
// 导入compression-webpack-plugin:压缩资源,生成.gz文件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
//...其他配置
module.exports = defineConfig({
    //.....其他配置
    configureWebpack:{
        //...其他配置
        //找到plugin，添加插件
        plugins: [
          new CompressionWebpackPlugin({
            filename: '[path][base].gz',//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串
            algorithm: 'gzip',//压缩成gzip
            //所有匹配该正则的资源都会被处理。默认值是全部资源。
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240,//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
            minRatio: 0.8//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
          })
        ]
    }
})

打包

可以发现生成了许多“.gz”格式的文件，这些文件就是压缩后的

服务端配置

生成压缩后的文件，不能直接使用，需要服务端配置才可以使用，而且发现打包生成的“dist/index.html”首页内，也没有直接引用这些“.gz”格式的文件。
而实现的关键，其实就是让服务端向浏览器发送“Content-Encoding=gzip”这个响应头，并把对应的“.gz”格式文件发送给浏览器，让浏览器通过“gzip”编码格式来解析资源。

nginx实现（nginx.conf）

在http模块内配置“gzip_static on”即可。

http {
 gzip_static on;
}

发布

访问时，可看到 请求 和 回复 里都带有gzip标记