vite打包优化之——压缩

最近给vite大屏~~(225)~~项目做优化，使用了gzip压缩和图片压缩,效果出奇的好，包体积优化了百分之85

gizip压缩 : pnpm install vite-plugin-compression -D，主要是针对代码压缩如：.css、.html、.js

import compression from 'vite-plugin-compression'// -10
export default defineConfig({
  //...
  plugins: [
  //gzip压缩
     compression({
       verbose: true, // 输出压缩日志
       disable: false, // 是否禁用压缩
       threshold: 10240, // 对超过10KB的文件进行压缩
       algorithm: 'gzip', // 使用gzip压缩
       ext: '.gz' // 压缩后文件的扩展名
     })
  ],
})

图片压缩 :

1. pnpm install vite-plugin-image-optimizer -D
2. pnpm i sharp --save-dev ： 使用Sharp.js优化标量资产(png, jpeg, gif, tiff, webp, avif)，并可以为每个扩展类型传递自定义配置
3. pnpm i svgo --save-dev ：使用SVGO优化SVG资产并传递自定义配置

import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'//-200
export default defineConfig({
  // ...
  plugins: [
    // 图片压缩
    ViteImageOptimizer()
  ],
})