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

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip壓縮
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                filename: '[path].gz[query]', // 壓縮后的文件名(保持原文件名，后綴加.gz)
                minRatio: 1, // 壓縮率小于1才會(huì)壓縮
                threshold: 10240, // 對(duì)超過(guò)10k的數(shù)據(jù)壓縮
                deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
            }),
        ],
    },
};

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    gzip_static on;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    # 開啟gzip
    gzip  on;
    
    # 設(shè)置緩沖區(qū)大小
    gzip_buffers 4 16k;
    
    #壓縮級(jí)別官網(wǎng)建議是6
    gzip_comp_level 6;
 
    #壓縮的類型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;  

// yarn add compression-webpack-plugin -D
// 在vue.congig.js中引入并修改webpack配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
? ? ? ? if (process.env.NODE_ENV === 'production') {
? ? ? ? ? ? // 為生產(chǎn)環(huán)境修改配置...
? ? ? ? ? ? config.mode = 'production'
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? plugins: [new CompressionPlugin({
? ? ? ? ? ? ? ? ? ? test: /\.js$|\.html$|\.css/, //匹配文件名
? ? ? ? ? ? ? ? ? ? threshold: 10240, //對(duì)超過(guò)10k的數(shù)據(jù)進(jìn)行壓縮
? ? ? ? ? ? ? ? ? ? deleteOriginalAssets: false //是否刪除原文件
? ? ? ? ? ? ? ? })]
? ? ? ? ? ? }
? ? ? ? }

const compression = require('compression')
app.use(compression()) ?// 在其他中間件使用之前調(diào)用