vue 打包设置

1、vue webpack配置

filename: '[path][base].gz',// 设置成这样就行了

const { defineConfig } = require('@vue/cli-service')

const debug = process.env.NODE_ENV !== 'production'


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

const TerserPlugin = require("terser-webpack-plugin");
const productionGzipExtensions = ['js', 'css'];

module.exports = defineConfig({
  transpileDependencies: true,

})
module.exports = {
  publicPath: "./",
  outputDir: `dist/prod`,
  lintOnSave: false,//是否开启eslint保存检测 ,它的有效值为 true || false || 'error'\
  devServer: {
    open: true, //配置自动启动浏览器
    // host: "192.168.10.18",
    https: false,
    // hotOnly: false, //热更新
    port: 7878,
    proxy: {
      

    },
    client: {
      overlay: false,
    },
  },
  // configureWebpack: {
  //   resolve: {
  //     alias: {
  //       '@': path.resolve(__dirname, 'src')
  //     }
  //   }
  // },

  // chainWebpack: (config) => {
  //   config.resolve.alias
  //     .set('@', resolve('src'))
  //     .set('assets', resolve('src/assets'));
  // },
  // css: {
  //   loaderOptions: {
  //     postcss: {
  //       plugins: [
  //         require("postcss-px2rem-exclude")({
  //           remUnit: 192, //1920
  //           // exclude: /node_modules|folder_name/i
  //         }),
  //       ],
  //     },
  //   },
  // },

  productionSourceMap: false,
  configureWebpack: config => {
    if (debug) { // 开发环境配置
      config.devtool = 'source-map'
    }else{

      // 开启分离js
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',  
          maxInitialRequests: Infinity,
          minSize: 20000,

          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/, // 提取 node_modules 中的库
              name: 'vendors',                // 提取到 vendors.js
              chunks: 'all',
              // priority: -10,
              // name (module) {
              //   const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              //   return `npm.${packageName.replace('@', '')}`
              // }

            },
          },
        },
        minimize: true,
        minimizer: [
          new TerserPlugin({
            extractComments: false,//不将注释提取到单独的文件中
            terserOptions: {
              compress: {
                // 移除 warning,console,debugger等
                warnings:false, 
                drop_console: true,
                drop_debugger: true,
                pure_funcs: ['console.log'] // 移除console
              },
              output: {
                // 去掉注释内容
                comments: false,
              }
            }
          })
        ]
      };
      config.plugins.push(new CompressionWebpackPlugin({
        // filename: '[path].gz[query]',
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,

      }))
    }

  },
  configureWebpack:{
    
    module: {
      rules: [
        {
          test: /\.(jpg|png|gif)$/,
          use: [
            {
              loader: 'image-webpack-loader',
                options: {
                 mozjpeg: {
                  progressive: true,
                  quality: 65
                 },
                optipng: {
                  enabled: false
                },
                pngquant: {
                  quality: [0.65, 0.90],
                  speed: 4
                },
                gifsicle: {
                  interlaced: false
                  },
                webp: {
                  quality: 75
                }
  
  
              }
            }
          ]
          
        },
      ],
    },
  }




}

2、nginx 配置访问gz

http {
  gzip_static on;          # 启用预压缩文件查找
  brotli_static on;        # 启用 Brotli 预压缩文件（需安装 ngx_brotli 模块）

  # 若未找到预压缩文件，动态压缩
  gzip on;
  gzip_types text/plain text/css application/json application/javascript text/xml;
}