前言
开启Nginx Gzip 优化网页加载速度
不限于Vue项目,所有前端皆可开启gzip优化
如果是Vue项目可以直接打包出来gz文件,这样可以省去nginx动态压缩占用的cpu
- Nginx 1.16.x
- --with-http_gzip_static_module 模块 [可选]
- Vue 3.x / Vue2.x
Nginx 增加Gzip配置
# 开启Gzip
gzip_static on;
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 10k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 5;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
开启Vue Gzip打包
安装 compression-webpack-plugin
npm compression-webpack-plugin --save-dev
config/index.js
build: {
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
}
webpack.prod.conf.js
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 1024, // 10K以上进行压缩
deleteOriginalAssets: false, // 是否删除原文件
minRatio: 0.8 //压缩率达到20%才会压缩
})
如果是 vuecli3
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
...
configureWebpack: () => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
threshold: 10240, // 10K以上进行压缩
deleteOriginalAssets: false, // 是否删除原文件
minRatio: 0.8 //压缩率达到20%才会压缩
})
]
}
}
}
}
原文地址&更多文章:http://www.idmiss.com/646
网友评论