vue.config.js 可参考 -zgcs

代码可以直接复制，也可以按需引入，一般都用的到，注意里面需要安装的依赖。

分别是 打包gzip压缩 和 图片压缩

cnpm install --save-dev compression-webpack-plugin

cnpm install --save-dev image-webpack-loader

const path = require("path");
// const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const CompressionPlugin = require("compression-webpack-plugin");
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
//   .BundleAnalyzerPlugin; // 打包分析
// const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const resolve = dir => path.join(__dirname, dir);

module.exports = {
  publicPath: "./",
  assetsDir: "static",
  transpileDependencies: ["vuetify"],

  pwa: {
    name: "yzgcs.com"
  },

  //设置为false以加速生产环境构建
  productionSourceMap: false,

  //webpack配置
  configureWebpack: {
    //关闭 webpack 的性能提示
    performance: {
      hints: false
    },
    externals: {
      // vue: "Vue"
      // vuetify: "vuetify"
    },
    plugins: [
      new CompressionPlugin({
        filename: "[path][base].br",
        algorithm: "brotliCompress",
        test: /\.(js|css|html|svg)$/,
        compressionOptions: {
          // zlib’s `level` option matches Brotli’s `BROTLI_PARAM_QUALITY` option.
          level: 11
        },
        threshold: 1024,
        minRatio: 0.8,
        deleteOriginalAssets: false
      })
    ]
  },

  chainWebpack: config => {
    config.plugins.delete("prefetch"); // 移除 prefetch 插件

    config.resolve.symlinks(true); // 修复热更新失效
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap(args => {
      // 修复 Lazy loading routes Error
      args[0].chunksSortMode = "none";
      return args;
    });
    config.resolve.alias // 添加别名
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@store", resolve("src/store"));
    // 压缩图片
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        // bypassOnDebug: true
        mozjpeg: {
          progressive: true,
          quality: 50
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: [0.5, 0.65],
          speed: 4
        },
        gifsicle: {
          interlaced: false
        }
        // ios不支持
        // webp: {
        //   quality: 100
        // }
      })
      .end();
    // 取消多个空格被压缩
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        options.compilerOptions.whitespace = "preserve";
        return options;
      });
    // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
    // if (IS_PROD) {
    //   config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
    //     {
    //       analyzerMode: "static"
    //     }
    //   ]);
    // }
  },

  css: {
    extract: false
  }
};