1. vite配置
- 首先下载插件
npm install vite-plugin-compression -D
在vite.config.js中引入
import viteCompression from 'vite-plugin-compression'
/** 此处引用 */
plugins: [
viteCompression(),
],
- 执行npm run build在控制台查看效果,生成了.gz后缀的包
2. nginx配置
- 配置之后,nginx会加载.gz后缀的文件
server {
listen 8080;
server_name localhost;
#gzip
#开启gzip功能
gzip on;
#开启gzip静态压缩功能
gzip_static on;
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
}
- 查看浏览器效果
对应包