vue GZip打包压缩工具使用

vue2

1. 安装

   yarn add compression-webpack-plugin -D

2. 使用手册

   vue.config.js
   // 使用webpack 压缩工具

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

	// 判断是否是生产环境

const isProd= process.env.NODE_ENV !== 'development'

chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    })
    if (isProd) {
      // 对超过10kb的文件gzip压缩
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/, // 匹配文件名
          filename: '[path].gz[query]',　// 压缩后的文件名
          algorithm: 'gzip',　// 使用gzip压缩
          minRatio: 1,　// 压缩率小于1才会压缩
          threshold: 10240, // >10kb
          deleteOriginalAssets: false //是否删除原文件
        })
      );
    };
  },

vue3+vite

GitHub地址： https://github.com/nonzzz/vite-plugin-compression

1. 安装

yarn add vite-plugin-compression2 -D

2. 使用
   vite.config.js

// vite 打包压缩工具
import { compression } from 'vite-plugin-compression2'

export default defineConfig({
  plugins: [
    // ...your plugin
    compression({ // gzip压缩
      algorithm: 'gzip',　// 默认使用gzip压缩
      filename: '[path][base].gz', // 压缩后的文件名
      threshold: 10240, // 对大于 10kb 的文件进行压缩
      deleteOriginalAssets: false //是否删除原文件
    })
  ],
});

另外： productionSourceMap: false, // 不生成sourcemap,设为false，既可以减少包大小，也可以加密源码