Vue 使用 gzip 压缩

gizp 压缩是一种 http 请求优化方式，通过减少文件体积来提高加载速度。html、js、css 文件甚至 json 数据都可以用它压缩，可以减小 60%以上的体积。

webpack 在打包时可以借助 compression webpack plugin 实现 gzip 压缩，首先需要安装该插件：

1	npm install compression-webpack-plugin --save-dev

vue.config.js 配置

在 vue.config.js 中按照如下方式进行配置：

const { defineConfig } = require("@vue/cli-service");
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = defineConfig({
  productionSourceMap: false,
  transpileDependencies: true,
  publicPath: "./",
  lintOnSave: false,

  chainWebpack: (config) => {
    config.optimization.minimize(true);
    config.optimization.splitChunks({
      chunks: "all",
    });
    config.plugin("compressionPlugin").use(
      new CompressionPlugin({
        // test: /\.js$|\.html$|.\css$|\.otf$|\.ttf/,
        test: /\.(js|css|html|ttf|woff|woff2)$/,
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        deleteOriginalAssets: false, // 删除原文件
      })
    );
  },
});