GZip压缩

webpack

1、安装插件

npm i -D compression-webpack-plugin

npm i compression-webpack-plugin@4.0.0 --save -dev

"compression-webpack-plugin": "^1.1.12",  //低版本

2、config.js文件配置

格式一：

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

const productionGzipExtensions = ['js', 'css']



module.exports = {

    chainWebpack: config => {

        config.resolve.alias .set('@', resolve('src')) 

        if (process.env.NODE_ENV === "production") {

            config.plugin('compressionPlugin')

                .use(new CompressionPlugin({

                    algorithm: 'gzip',

                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),

                    threshold: 10240,

                    minRatio: 0.8,

                    deleteOriginalAssets: false // 是否删除源文件

                }));

        }



    },

    configureWebpack: (config) => {

        if (process.env.NODE_ENV === "production") { 

            ...

        } else {

            // 为开发环境修改配置...

        }

    },

    // 打包时不生成.map文件

    productionSourceMap: false,

    lintOnSave: false,

    devServer: {...}

}

格式二：

const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ['js', 'css']
module.exports = {
 configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ],
  }
}

webpack版本4.0以上

①、先执行卸载命令->npm uninstall compression-webpack-plugin

②、执行安装命令->npm i compression-webpack-plugin@5.0.1

vite

1、安装

npm i vite-plugin-compression -D

2、打包

vite.config.ts配置

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';

import viteCompression from 'vite-plugin-compression';
export default ({ mode }) => {
    const root = process.cwd();
    const env = loadEnv(mode, root);
    return {
        base: '/',
        plugins: [
            vue(),
            VueSetupExtend(),
            AutoImport({
                resolvers: [ElementPlusResolver()]
            }),
            viteCompression({
                verbose: true, // 默认即可
                disable: false, //开启压缩(不禁用)，默认即可
                deleteOriginFile: false, //删除源文件
                threshold: 10240, //压缩前最小文件大小
                algorithm: 'gzip', //压缩算法
                ext: '.gz', //文件类型
            })
        ],
        build: {
            minify: 'terser',
            terserOptions: {
                compress: {
                    //生产环境时移除console
                    drop_console: true,
                    drop_debugger: true,
                },
            }
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
                '~': path.resolve(__dirname, 'src')
            }
        },
       

        server: {...},

        
    }
};

3、nginx修改配置

server{
	     listen       9995;
        server_name  10.96.15.93;
        #会优先查找静态gzip资源
		gzip_static on;
		autoindex on;
        location / {
			
            root   E:/project/vue/test/packge/dist;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
        }
        location ^~ /api/ {
            proxy_pass   http://192.168.2.83:31219/;
        }	
		
	}
	



gzip on;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
gzip_vary on;

gzip_buffers：设置压缩文件所使用缓存空间的大小（number，指定Nginx服务器需要向系统申请缓存空间的个数；size，指定每个缓存空间的大小。） 

gzip_types：压缩类型，js是application/javascript，css是text/css

gzip_comp_level：设置压缩程度，包含1-9级。级别1表示压缩程序最低，压缩效率最高；9表示压缩程度最高，压缩效率最低，最费时间。默认级别1。（压缩级别并不是越高越好，需要根据自己的情况来设定压缩级别。）

gzip_vary：设置为开启，服务器返回数据时会在头部带上"Vary:Accept-Encoding"的标识。客户端便可以知道获取到的数据是否已经被压缩，默认为关闭
原文链接：https://blog.csdn.net/qq_32439381/article/details/129438631