前端使用 Gzip打包项目

  首先: 需要 在项目中下载 npm install compression-webpack-plugin@5.0.1 (我是安装在项目依赖中的dependencies)  

 其次:在项目中找到vue.config.js文件然后 找到  configureWebpack项  

 也可以这样写 test:/\.(js|css|woff|woff2|ttf|eot|png|svg|jpg|jpeg)(\?.*)?$/i

  configureWebpack: (config) => {
   config.plugins.push(new CompressionWebpackPlugin({
      filename: '[path][base].gz',//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串
      algorithm: 'gzip',//压缩成gzip
      //所有匹配该正则的资源都会被处理。默认值是全部资源。
      test: /\.(js|css|woff|woff2|ttf|eot|png|svg|jpg|jpeg)(\?.*)?$/i,
      // test: /\.js$|\.css$|\.html$|\.woff2$|\.woff$|\.ttf$|\.eot$|\.png$|\.svg$|\.jpg$|\.jpeg$/,

      // threshold: 10240,//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
      minRatio: 0.8,//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
      deleteOriginalAssets: true//删除原来代码
    }))

 还有一种写法

配置完成之后打包的js,css.html 后缀都变成  .gz