Vue 项目优化

// vue.config.js
const compressionWebpackPlugin = require("compression-webpack-plugin"); //引入插件
const productionGZipExtensions = ["js", "css"]; //压缩的文件类型
// configureWebpack 配置方法有 Object、Function 两种，自选一种即可。
module.exports = {
  //  Object 配置方法
  configureWebpack: {
    plugins: [
      new compressionWebpackPlugin({
        // [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
        // compression-webpack-plugin@3.0.0 及以上版本的 asset 字段应为 filename。
        asset: "[path].gz[query]",
        //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
        algorithm: "gzip",
        // 通过正则设定压缩资源的范围。默认值是全部资源。不建议压缩图片资源。
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
        // 正则匹配的资源文件大于该值的资源会被处理。单位是 bytes。默认值是 0。
        threshold: 10240,
        // 正则匹配的资源文件压缩率小于这个值的资源才会被处理。默认值是 0.8。
        minRatio: 0.8,
      }),
    ],
  },

  // Function 配置方法
  configureWebpack: (config) => {
    if (process.env.NOVE_ENV === "production") {
      // 生产环境判断
      config.plugins.push(
        new compressionWebpackPlugin({
          asset: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
  },
};