@klweb/vite-compression

@klweb/vite-compression 是一款非常实用的 Vite 扩展插件，它可以帮助你在Vite进行项目打包时，开启静态资源压缩性能优化策略，自动压缩所有静态资源文件（如css、js、图片和音频等），很大程度减少静态资源的体积，以实现最佳的性能和用户体验。

@klweb/vite-compression 支持多种压缩算法，并且具有可配置选项，以便根据您的需求进行定制。默认开启 gzip 压缩算法，在客户端请求时，服务器返回的 gzip 类型资源时，会自动解压缩，从而还原原始的数据，这样，既能减少网络传输的带宽损耗，也能提高资源传输的效率。

安装插件

npm install @klweb/vite-compression -D

如何使用

在 vite.config.ts 文件中的 plugin[] 中使用插件：

import ViteCompress from '@klweb/vite-compression';
export default defineConfig({
	plugins: [
		ViteCompress({
			limitFileSize: 10240, // 启用压缩的文件大小限制，单位是字节，默认为 10240(B)（即10KB以上文件进行压缩）
			compressAlgorithm: 'gzip',  // 压缩算法，默认 gzip
			ext: '.gz'  // 生成的压缩包后缀
		})
	]
})

配置参考

disableCompress

• 类型：boolean
• 默认：false

是否禁用压缩

fileExtFilter

• 类型：RegExp
• 默认：/.(js|mjs|cjs|json|css|html)$/i

过滤器-对哪些类型的文件进行压缩

isDeleteOriginFile

• 类型：boolean
• 默认：false

压缩后是否删除源文件

isOutputLog

• 类型：boolean
• 默认：true

是否在控制台输出压缩结果信息

limitFileSize

• 类型：number
• 默认：10240

启用压缩的文件大小限制，单位是字节

compressAlgorithm

• 类型：'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'
• 默认：gzip

压缩算法

ext

• 类型：'.gz' | '.br' | '.z' | '.z'
• 默认：.gz

生成的压缩包后缀

进阶

@klweb/vite-compression 支持 gzip、brotliCompress 、deflate 和 deflateRaw 四种压缩算法，这些压缩算法都是无损压缩算法，可以将原本较大的文件或数据流压缩成较小的文件或数据流，从而减少网络传输的数据量，提高传输效率。

压缩算法说明：

• gzip：使用 gzip 压缩算法进行压缩，生成的后缀是“.gz”
• brotliCompress：使用 Brotli 压缩算法进行压缩，生成的后缀是“.br”
• deflate：使用 deflate 压缩算法进行压缩，生成的后缀是“.z”
• deflateRaw：使用 deflate 压缩算法进行压缩，但是不使用任何字典，生成的后缀也是“.z”

在选择使用哪种压缩算法时，需要考虑以下几个因素：

1. 压缩比：不同的压缩算法可以达到不同的压缩比，一般来说，Brotli 压缩算法的压缩比最高，其次是 gzip 和 deflate，而 deflateRaw 的压缩比最低。
2. 解压缩时间：不同的压缩算法解压缩时间不同，一般来说，gzip 和 deflate 的解压缩时间较短， Brotli和 deflateRaw 的解压缩时间较长。
3. 浏览器支持度：不同的压缩算法在浏览器中的支持度也不同，一般来说，gzip 是最常用的压缩算法，几乎所有现代浏览器都支持它。而 Brotli 压缩算法在一些较老的浏览器中可能不被支持。

在选择使用哪种后缀时，需要考虑以下几个因素：

1. 文件类型：不同的后缀适用于不同的文件类型，例如 .gz 通常用于文本文件的压缩，.br 通常用于图片和网页的压缩等。
2. 兼容性：不同的后缀在不同的操作系统和软件中可能存在兼容性问题，例如一些早期的软件可能只支持 .z 后缀的压缩文件。
3. 个人偏好：不同的开发者可能有不同的喜好和习惯，因此可能会选择不同的后缀来命名压缩文件。