vue.config.js 开启js\css压缩
module.exports = {
chainWebpack: (config) => {
...
// 生产环境，开启js\css压缩
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin').use(new CompressionPlugin({
test: /\.(js|css|less|gz)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 0.8,
deleteOriginalAssets: true // 删除源文件 -- 减小包大小
}))
}
...
}
}
打包文件显示：
微信图片_20211223162515.png
nginx.config 配置开启gzip。经费有限 ~~~
# 开启gzip
gzip on;
# gzip_static是nginx对于静态文件的处理模块，可以读取预先压缩的gz文件，多与构建时压缩同时使用
gzip_static on;
# 通知静态文件服务器客户端能够理解的gzip压缩文件，使其返回.gz文件。
# 反向代理服务器应该添加请求头proxy_set_header Accept-Encoding ‘gzip’
gzip_http_version 1.1;
# gzip 压缩级别 1-10
gzip_comp_level 9;
# 进行压缩的文件类型。
gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
将打包文件复制到nginx下的html中
微信图片_20211223163539.png
js访问请求，gzip开启成功
微信图片_20211223163543.png
