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压缩内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://blog.csdn.net/Old_Soldier/article/details/127192862
相关文章
- 这篇文章主要介绍了详解如何将c语言文件打包成exe可执行程序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-25
将c#编写的程序打包成应用程序的实现步骤分享(安装,卸载) 图文
时常会写用c#一些程序，但如何将他们和photoshop一样的大型软件打成一个压缩包，以便于发布....2020-06-25- 这篇文章主要介绍了Pyinstaller打包文件太大的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了python打包生成so文件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了Maven打包的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-13
- 这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-12
- 本文主要介绍了webpack搭建脚手架打包TypeScript代码，文中通过示例代码介绍的非常详细,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-21
- 这篇文章主要介绍了编译打包video.js的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧...2020-12-09
- 本文主要介绍了Vue打包后页面出现空白解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-03
Shell脚本构建Docker 半自动化编译打包发布应用操作
这篇文章主要介绍了Shell脚本构建Docker 半自动化编译打包发布应用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-30- 本文主要介绍了Qt使用windeployqt工具实现程序打包发布方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-11-01
- 这篇文章主要介绍了教你怎么用Idea打包jar包,文中有非常详细的代码示例,对刚开始使用IDEA的小伙伴们很有帮助哟,需要的朋友可以参考下...2021-05-12
- 这篇文章主要介绍了Java jar打包工具使用方法步骤解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-15
Python selenium 自动化脚本打包成一个exe文件(推荐)
这篇文章主要介绍了Python selenium 自动化脚本打包成一个exe文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下...2020-04-27- 这篇文章主要介绍了Android Studio中一套代码多渠道打包的实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧...2020-05-25
- 这篇文章主要介绍了python脚本打包后无法运行exe文件的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-17
- 这篇文章主要介绍了Python如何将模块打包并发布，帮助大家分享自己的模块，感兴趣的朋友可以了解下...2020-08-31
添加powershell脚本来解决nuget打包文件丢失问题
这里给大家分享的是作者在使用nuget打包的过程中遇到丢失文件的问题的时候使用powershell脚本实现的解决办法，非常的巧妙，这里推荐给大家...2020-06-30Java将文件夹保留目录打包为 ZIP 压缩包并下载的教程详解
这篇文章主要介绍了Java将文件夹保留目录打包为 ZIP 压缩包并下载的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-13