vue项目打包开启Gzip压缩
1. vue步骤
安装npm i compression-webpack-plugin -D 提供带 Content-Encoding 编码的压缩版的资源 webpack地址使用—在vue.config.js文件中
const CompressionPlugin
= require('compression-webpack-plugin')
module
.exports
= {
configureWebpack
: {
plugin
: [
new CompressionPlugin({
test
: /\.js$|\.html$|\.css/,
threshold
: 10240
})
]
}
}
运行npm run build即可
2. Nginx步骤
在nginx的安装目录中找到conf-> nginx.conf文件打开 在http中添加如下代码
http
{
...
gzip on
;
gzip_static on
;
gzip_buffers
4 16k
;
gzip_comp_level
5;
gzip_types text
/plain application
/javascript text
/css application
/xml text
/javascript application
/x
-httpd
-php image
/jpeg image
/gif image
/png
;
...
server
{
...
}
...
}
3. 判断是否开启
npm run build之后可以看到打包的代码大小
打开浏览器的 控制台F12，选中network，在标红的地方鼠标右键
选中Response Headers —> Content-Encoding
可以看到gzip说明已经开启
鼠标悬停看这个文件的大小和npm run build之后打包的，显示gzipped是否相近，并且提示XXKB transferred over network,resource size :XXKB
