安装依赖
npm install compression-webpack-plugin --save-dev
配置
vue.config.js
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: (config) => {
// 开发环境不需要gzip
if (process.env.NODE_ENV !== "production") return;
config.plugins.push(
new CompressionWebpackPlugin({
// 正在匹配需要压缩的文件后缀
test: /\.(js|css|svg|woff|ttf|json|html)$/,
// 大于10kb的会压缩
threshold: 10240,
})
);
},
}
Nginx配置
Nginx配置,只需要加一个 gzip_static on;
就可以了
server {
listen 80;
server_name localhost;
location / {
root dist;
index index.html index.htm;
gzip_static on;
}
}
效果
执行打包后,压缩了4倍
查看nginx启动是否成功使用gzip