vite + vue3项目 对vite.config.ts 配置gzip压缩

对vite + vue3 创建的项目打包的时候进行 gzip 压缩

• 1. 安装 vite-plugin-compression 插件

npm install vite-plugin-compression

• 2. 在 vite.config.ts/js 中导入vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'

• 3. 在 vite.config.ts/js 中的 plugins 中使用vite-plugin-compression插件即可

export default defineConfig({
	plugins: [
		viteCompression({
	      filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
	      threshold: 1024, // 文件容量大于这个值进行压缩
	      algorithm: 'gzip', // 压缩方式
	      ext: 'gz', // 后缀名
	      deleteOriginFile: true, // 压缩后是否删除压缩源文件
    	})
	]
})

• 4. 保存改变后进行打包, 文件体积明显减小 3 倍左右