vue 使用CompressionPlugin压缩解决打包后文件过大的问题

vue cli版本：4.5.13

# 安装：

npm i compression-webpack-plugin@5.0.1 -D

注意

注：版本过高会报错 TypeError: Cannot read property 'tapPromise' of undefined

vue.config.js

const CompressionPlugin = require('compression-webpack-plugin');
 
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(
                new CompressionPlugin({
                    test: /\.(js|css)$/,
                    threshold: 10240, // 小于10KB就不进行压缩
                    minRatio: 0.8, // 压缩比率
                    deleteOriginalAssets: true // 删除源文件
                })
            )
        }
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

nginx配置：

location ~ .*\.(js|css)$ {
    gzip on; # 开启gzip
    gzip_static on; # 开启后查找.gz结尾的文件直接返回，不进行压缩
    gzip_min_length 1k; # 文件大于1K才进行压缩
    gzip_http_version 1.1; # 设置gzip针对的http协议版本
    gzip_comp_level 9; # 压缩级别，1-9，数字越大压缩越好，越占用cpu
    gzip_types  text/css application/javascript; # 进行压缩的文件类型
    root /dist;
}

1
2
3
4
5
6
7
8
9

运行报错

配置 --with-http_gzip_static_module

## 配置
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
## 重新安装
make && make install
## 重新启动
./nginx -s reload

1
2
3
4
5
6

#vue

上次更新: 2024/02/20, 17:31:36

← vite引入svg图片 vue2.x递归组件树形组件→