gzip 压缩
nginx 开启静态 gzip 配合 Vue 构建
vuecli 2.0配置
在站点配置添加如下代码:
location ~* \.(css|js)$ { gzip_static on; }
这是 nginx 的静态 gzip功能,会自动查找对应扩展名的文件,如果存在 gzip 文件,就使用,如果没有就用原文件
配合 vue-cli 的构建工具,开启 config/index.js 中的
productionGzip: true
Vue默认没有安装相应webpack 插件,需要手动安装一下:
npm install --save-dev compression-webpack-plugin
"compression-webpack-plugin": "^1.1.11", 目前这边不报错的版本
以上是 vuecli 2.0配置
vuecli3.0Gzip相关配置
1 下载loader
npm i -D compression-webpack-plugin
2 修改vue.config.js
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
configureWebpack:config=>{
if(progress.env.NODE_ENV === 'production'){
return{
plugins: [
new CompressionPlugin({
test:/\.js$|\.html$|.\css/, //匹配文件名
threshold: 10240,//对超过10k的数据压缩
deleteOriginalAssets: false //不删除源文件
})
]
}
}
},
}