vue 使用CompressionPlugin压缩解决打包后文件过大的问题
vue cli版本:4.5.13
# 安装:
npm i compression-webpack-plugin@5.0.1 -D
1
注意
注:版本过高会报错 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
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
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
2
3
4
5
6
上次更新: 2024/02/20, 17:31:36
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13