背景Gzip是一种文件压缩算法减少文件大小节省带宽从而提减少网络传输时间网站会更快更丝滑。// nginxroothcss-ecs-1d22:/etc/nginx# nginx-v nginx version:nginx/1.24.0// nodendde v18.20.1// dependenciesvue:^3.2.45,// devDependenciesvite:^5.0.0,vite-plugin-compression:^0.5.1Gzip工作原理浏览器请求url在请求头中设置属性accept-encodinggzip, deflate。表明浏览器支持gzip这个参数是浏览器自动会携带的请求头信息。服务器收到浏览器发送的请求之后服务器会返回压缩后的文件并在响应头中包含content-encoding: gzip如果没有压缩文件返回未压缩的请求文件。浏览器接收到到服务器的响应根据content-encoding: gzip响应头使用gzip策略去解压压缩后的资源通过content-type内容类型决定怎么编码读取该文件内容。使用Gzip压缩主要的两种姿势动态压缩: 通过 nginx gzip 来进行在线上实时压缩代码前端不做额外处理 。静态压缩打包构建使用webpack/vite预先生成对应的.gz文件让 nginx 直接使用已经压缩好的.gz文件 。动态压缩动态压 其实就是服务端进行压缩 就是通过nginx gzip来进行在线上压缩gzip它是一个ngxin的一个内置功能模块。就是需要去开启gzip相关配置 nginx就可以去做相应的在线压缩处理缺点: 对服务端CPU 要求会比较高 为了减少不可控制的因素还是建议采用静态压缩的方式nginx http块中配置如下http{# 开启 Gzipgzip on;# 压缩级别1-9推荐 6平衡 CPU 与压缩率gzip_comp_level 6;# 最小压缩文件大小小于 1KB 不压缩gzip_min_length 1k;# 压缩缓冲区gzip_buffers 16 8k;# 压缩版本协议gzip_http_version 1.1;# 需要压缩的 MIME 类型gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xmlrss application/atomxml image/svgxml;# 为反向代理的请求也开启压缩gzip_proxied any;# 禁用对 IE6 的压缩gzip_disable MSIE[1-6]\.;# 添加 Vary 响应头gzip_vary on;}静态压缩在本地项目中配置vite-plugin-compression插件打包生成.gz文件。不用过于在意 cup 的负载与峰值。但是需要在 ngxin 配置一个 gzip_static 静态压缩模块 。nginx http块中配置gzip_static on;本地安装vite-plugin-compression打包插件npm i -D vite-plugin-compressionvite.config.js中配置importviteCompressionfromvite-plugin-compressionexportdefaultdefineConfig({plugins:[viteCompression({// //压缩算法可选[gzip’,brotlicompress’....]algorithm:gzip,//大于·10kb·的文件压缩默认为·10240threshold:10240,//是否在控制台中输出压缩结果,线上最好设置为falseverbose:true,// 压缩后是否删除源文件// deleteOriginFile: true})]})验证