图片太大了(13M)，非常占用服务器资源该怎么办？

UI切了一张13M的图片，我人傻了。导致页面加载的时候，引用图片加载了很久，出现了一种卡顿的现象。

可不可以叫他切小一点？可以。但是无法确定下一次又会拿多大的图片过来，所以最好的办法还是交给程序去处理。

我用的是vite项目。

下载vite-plugin-imagemin

cnpm i vite-plugin-imagemin -D

一定要用cnpm下载，否则会下载失败。用yarn也不行。

//vite.config.js

import viteImagemin from 'vite-plugin-imagemin';

export default () => {
  return {
    plugins: [
      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,
            },
          ],
        },
      }),
    ],
  };
};

打包后

13M的图片直接变成了255K，图片质量在视觉上也相差不多。并且可以通过调节数值大小来改变打包后图片的质量。

完美解决了图片太大导致页面加载太卡的问题。

注意

目前插件无法处理30M以上的图片，会卡住不动，我在github上提了issue了，等待解决把。