vite打包优化

vite 打包优化

文件压缩

安装

npm install vite-plugin-compression -D

使用配置项

// 在vite.config.ts添加如下配置

import viteCompression from "vite-plugin-compression";

viteCompression({
      algorithm: "gzip", 
      threshold: 10240,
      verbose: true, // 是否在控制台中输出压缩结果
      ext: ".gz",
      deleteOriginFile: true, // 源文件压缩后是否删除
}),

另外还要配置一下nginx服务器，也就是开启nginx静态压缩

// nginx.conf 文件
server {
  gzip on;
  gzip_static on;
}

ngixn设置后, 浏览器响应会出现 Content-Encoding: gzip就表示成功

图片压缩

安装

npm i vite-plugin-imagemin -D

配置

// vite.config.ts 文件

import viteImagemin from 'vite-plugin-imagemin'


plugin: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
]

生产环境移除console

// vite.config.ts 文件 

build: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    minify: "terser",
},