The plugin does not reduce images, does not convert them.

[tuber84]

Steps to reproduce

Installed via pnpm, all dependencies were installed, no errors.

• "pnpm build" does not produce any errors (screenshot).
• "pnpm dev" works great project available, all images are in place.
• Vite settings as you recommend, nothing extra.
• But nothing happens with the images (from the public/ folder) (they are not compressed, not converted).

Where to look for the reason for such work?

vite.config.js :

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import imagemin from "unplugin-imagemin/vite";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    imagemin({
      // Default mode squoosh. support squoosh and sharp
      mode: "sharp",
      // Default configuration options for compressing different pictures
      compress: {
        jpg: {
          quality: 40,
        },
        jpeg: {
          quality: 40,
        },
        png: {
          quality: 70,
        },
        webp: {
          quality: 70,
        },
      },
      // The type of picture converted after the build
      conversion: [
        { from: "png", to: "jpeg" },
        { from: "jpeg", to: "webp" },
        { from: "jpg", to: "webp" },
      ],
    }),
  ],
});

package.json:

{
  "name": "vite_tets",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "unplugin-imagemin": "^0.5.9",
    "vite": "^4.4.5"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^4.3.4",
    "sharp": "^0.32.6"
  }
}

What is expected?

the expectation is that images will be compressed and converted like a still from your video.

What is actually happening?

moved the images to the root of the public folder

System Info

No response

Any additional comments?

No response

[ErKeLost]

Thank you for your use.

• The first point is that if you do not use pictures in the project, they will not be compressed. They are based on the loading module.

• The second point is that the automatic compression of public public file directories is still in progress, and you will soon have the effect you want.

You can use them in the project for the time being so that you can compress them. If you update this feature later, I will let you know as soon as possible.

[tuber84]

Еhanks for the prompt response. I use images in a css file via background-image: url(/public/example.jpeg) and the plugin doesn’t “see” them, so do I need to use them via import in javascript? import Image from 'example.jpg'

[ErKeLost]

you can set beforeBundle: false Add this to the property This method modifies the compressed image in the final build file ，Module is found by default, but the background image in css is not in module.

[tuber84]

Thanks for helping a beginner, I tried your solution and nothing changed.

vite.config.js:

import vue from "@vitejs/plugin-vue";
import imagemin from "unplugin-imagemin/vite";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    imagemin({
      // Default mode squoosh. support squoosh and sharp
      mode: "sharp",
      conversion: [],
      beforeBundle: false,
      cache: false,
      compress: {
        jpg: {
          quality: 70,
        },
        jpeg: {
          quality: 70,
        },
        png: {
          quality: 70,
        },
        webp: {
          quality: 70,
        },
      },
    }),
  ],
});

• there is a proposal for a project, sketch out a simple sandbox project (many plugins provide such examples), where everything works (the simplest one without frameworks).

[ErKeLost]

Thank you for your advice. I'll provide an example of this and solve your problem. I'm going to try to do a sandbox now.

You can temporarily check that there is a playground in the current plugin repository, which is an example.

[ErKeLost]

https://stackblitz.com/edit/vitejs-vite-mgrkkb?file=playground%2Fpackage.json

I made an online link. You can try cd/playground & & pnpm build.

It may be because the picture exists in the public directory, but the current plugin may have done something wrong with public. I will fix this problem as soon as possible.

[tuber84]

Thank you, the project works in the sandbox, I downloaded it and will do “reverse engineering”.