打包优化之开启Gzip压缩（前端vite,后端express）

1.什么是Gzip

gzip是GNUzip的缩写，是一项有着超高压缩比的压缩程序。

2  vite开启Gzip压缩

2.1  安装插件

npm i vite-plugin-compression -D

2.1  在vite.config.ts文件中配置（viteCompression）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
 

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件      
      algorithm: 'gzip', //压缩算法
      ext: '.gz', //文件类型  
      threshold: 1024 // 对大于 1kb 的文件进行压缩
    })],
})

3.后端express开启gzip压缩

3.1 下载依赖

npm i compression

3.2 使用

var compression = require('compression');
app.use(compression());