vue-cli3+nginx配置gzip压缩
原创文章,转载请注明出处,谢谢!
安装插件
npm i -D compression-webpack-plugin
修改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 //不删除源文件
})
]
}
}
}
}
配置nginx
在nginx配置文件中增加如下配置:
location ~* \.(css|js)$ {
gzip_static on;
}
这是 nginx 的静态 gzip功能,会自动查找对应扩展名的文件,如果存在 gzip 文件,就使用,如果没有就用原文件。
说明:
因为我们在构建的时候已经生成好了压缩文件,所以只需要开启nginx的静态gzip功能就可以。如果不在构建的时候压缩,nginx也可以压缩,配置方法可以参考我的另一篇文章:nginx开启gzip压缩。
参考:https://www.jianshu.com/p/1738f9f092ee