位置: IT常识 - 正文
Vite打包性能优化之开启Gzip压缩(vite怎么打包)
编辑：rootadmin推荐整理分享Vite打包性能优化之开启Gzip压缩(vite怎么打包)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vite打包速度,vite打包报错,vite怎么打包,打包msi,打包msi,vite 打包空白,vite怎么打包,vnisedit 打包,内容如对您有帮助，希望把文章链接给更多的朋友！
在使用 vite 进行项目打包时，默认已经帮我们做了一些优化工作，比如代码的压缩，分包等等。除此之外，我们还有一些可选的优化策略，比如使用 CDN ，开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip 压缩。
GzipGzip 是一种压缩算法，在网络传输中使用非常普遍。随便打开一个网页，都使用了 gzip 压缩：
需要注意的是，Gzip 压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的 1/3。对于图片，音视频等媒体资源，本身就采用了有损压缩，所以再使用 gzip 并不能得到很大提升，有时候反而会适得其反。
开启 Gzip前端项目打包出的 js，css资源，非常适合使用 gzip 进行压缩。
这样，用户浏览器收到服务器返回的 gzip 类型资源时，会自动解压缩。这样，既能减少带宽的损耗，也能加快资源传输的时间。
Vite 社区插件中有一个 vite-plugin-compression，可以用来做 gzip 压缩。请看示例。
未使用 gzip 压缩前，打包后有一个很大的文件，控制台也给出了提示，使用 gzip 能大大减小文件体积：
安装插件：
pnpm add -D vite-plugin-compression配置文件：
vite.config.js
import viteCompression from 'vite-plugin-compression'export default defineConfig({ plugins: [ // ... viteCompression({ threshold: 1024000 // 对大于 1mb 的文件进行压缩 }) ],});再次打包：
可以看到，原来 2mb 多的文件，经过压缩后还剩 663 kb，压缩带来的提升非常明显。
插件的其他配置filter：过滤器，对哪些类型的文件进行压缩，默认为 ‘/.(js|mjs|json|css|html)$/i’verbose: true：是否在控制台输出压缩结果，默认为 truethreshold：启用压缩的文件大小限制，单位是字节，默认为 0disable: false：是否禁用压缩，默认为 falsedeleteOriginFile：压缩后是否删除原文件，默认为 falsealgorithm：采用的压缩算法，默认是 gzipext：生成的压缩包后缀上一篇：一款可以完美替代浏览器自带起始页的新标签页插件：Wetab(完美替身好看吗)
下一篇：Dos Ojos自然公园里El Pit Cenote的潜水员，墨西哥金塔纳罗奥 (© Christia Vizl/Tandem Stills + Motion)(自然公园在哪)
