vue cli4 使用压缩提高性能

环境

---

• vue cli ：4.3.1
• 安装： npm install compression-webpack-plugin --save-dev

配置

---

打开vue.config.js

     gzip压缩配置

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
//设置为false以加速生产环境构建
  productionSourceMap: false,
 configureWebpack: {
    plugins: [
    new CompressionPlugin({
        /* [file]被替换为原始资产文件名。
           [path]替换为原始资产的路径。
           [dir]替换为原始资产的目录。
           [name]被替换为原始资产的文件名。
           [ext]替换为原始资产的扩展名。
           [query]被查询替换。*/
        filename: '[path].gz[query]',
        //压缩算法
        algorithm: 'gzip',
        //匹配文件
        test: /\.js$|\.css$|\.html$/,
        //压缩超过此大小的文件,以字节为单位
        threshold: 10240,
        minRatio: 0.8,
        //删除原始文件只保留压缩后的文件
        deleteOriginalAssets: true
      })
    ]
  }
}

  nginx http 还需开启gzip  （或使用后端spring 开启）

     Brotli压缩配置

        Brotli是最初由Google开发的一种压缩算法，其压缩性能优于gzip。node11.7.0及更高版本在其zlib模块中具有对Brotli压缩的支持，相对gzip压缩提高20%。

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
//设置为false以加速生产环境构建
  productionSourceMap: false,
 configureWebpack: {
    plugins: [
    new CompressionPlugin({
        filename: "[path].br[query]",
        algorithm: "brotliCompress",
        test: /\.(js|css|html|svg)$/,
        compressionOptions: { level: 11 },
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: true
      })
    ]
  }
}

   nginx http 开启Brotli  https://www.mf8.biz/nginx-brotli-better-than-gzip-compression/ （或使用后端spring 开启）