Vite打包性能优化之开启Gzip压缩实践过程
更新时间：2022年12月02日 15:19:10 作者：昆吾kw
vue前端项目发布的时候,打包可实现gzip格式的压缩,下面这篇文章主要给大家介绍了关于Vite打包性能优化之开启Gzip压缩的相关资料,需要的朋友可以参考下
前言
在使用 vite 进行项目打包时，默认已经帮我们做了一些优化工作，比如代码的压缩，分包等等。除此之外，我们还有一些可选的优化策略，比如使用 CDN ，开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip 压缩。
Gzip
Gzip 是一种压缩算法，在网络传输中使用非常普遍。随便打开一个网页，都使用了 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：是否在控制台输出压缩结果，默认为 true
- threshold：启用压缩的文件大小限制，单位是字节，默认为 0
- disable: false：是否禁用压缩，默认为 false
- deleteOriginFile：压缩后是否删除原文件，默认为 false
- algorithm：采用的压缩算法，默认是 gzip
- ext：生成的压缩包后缀
总结
到此这篇关于Vite打包性能优化之开启Gzip压缩的文章就介绍到这了,更多相关Vite开启Gzip压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
mixins（混入）是一种分发 Vue 组件中可复用功能的非常灵活的方式，这篇文章主要为大家介绍了mixins混入的介绍和使用，需要的可以参考下2023-08-08
vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED
vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了在Vue3中实现飘逸的元素拖拽,在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新，事件的使用要成对出现，如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理，需要的朋友可以参考下2023-07-07
本篇文章主要介绍了深入理解vue-router之keep-alive。keep-alive使被包含的组件保留状态，或避免重新渲染，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了vue数组动态刷新失败问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了一看就会的vuex实现登录验证（附案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家详细介绍了vue实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了vue双向绑定数据限制长度的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
如何将iconfont图标引入到vant的Tabbar标签栏里边
这篇文章主要介绍了如何将iconfont图标引入到vant的Tabbar标签栏里边，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章主要介绍了基于vue实现分页/翻页组件paginator示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论