vue-cli3.0 开启 Gzip 压缩方法
# 1、安装插件
webpack
在打包时可以借助 compression webpack plugin
实现gzip
压缩,首先需要安装该插件:
npm i -D compression-webpack-plugin
1
若打包报如下错误:
这是由于脚手架目前最新只支持到了v6.1.1版本,所以降低版本后即可,例如安装下 6.1.1
这个版本即可:
npm install compression-webpack-plugin@6.1.1 --save-dev
1
# 2、在 vue.config.js 文件中进行配置
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240,//对超过10k的数据压缩
deleteOriginalAssets: false //不删除源文件
})
]
}
}
}
}
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
# 3、打包后的示例
注意
要使服务器返回.gz文件,还需要对服务器进行配置,根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件。
下面以 Nginx
为例:在 nginx.conf
中添加如下配置
http {
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13