Description

This feature request outlines reasoning and possible implementation of asset optimization process (e.g. image compression).

Currently, asset optimization such as image compression is achieved with 3rd party plugins such as vite-plugin-image-optimizer or unplugin-imagemin which follow same process and operate on each asset file in final bundle inside generateBundle hook.

The problem is that resulting filename of file being operated on is already resolved, meaning [hash] placeholder in output.assetFileNames option is resolved by using original file content, not on content processed via image optimization. Final asset filename in generateBundle hook can’t be changed, which results in same filename regardless of changes in optimization settings. The only way you can force cache busting based on content hash is to change contents of the original file, which defeats purpose of using plugin to operate on asset files included in the build.

Prior work includes open issue in Rollup repository which outlines adding transformAsset hook which will separate emitting from transform process and allow plugin developers to implement additional processing on asset files. This could possibly solve this issue, but I don’t know if that is all that’s needed for Vite’s asset handling which includes assets from e.g. CSS files.

Suggested solution

Since Vite already has build options for CSS minification, it already handles files outside JS space, and proposal is to add similar treatments to all assets inside Vite build process.

Option would be something like build.assetOptimization and would be disabled by default, but support either options for granular optimization options (for the optimization tool used in the process, outlined later in feature request), or boolean which would apply sensible defaults.

Asset optimization should be applied on each asset using appropriate tool. There are couple of options currently available:

• sharp
  • Used for every image asset type except SVG
  • Used by vite-plugin-image-optimizer
• imagemin
  • Collection of image optimization plugins, used in a lot of image optimizers since it’s known for some time
  • Used by vite-plugin-imagemin
• squoosh-next
  • Fork of popular Squoosh which includes additional optimization options for already existing algorithms
  • Used by unplugin-imagemin
• @napi-rs/image
  • Rust based image processing, probably a good candidate based on Vite’s roadmap to Rust based build pipeline
  • Used by Rsbuild’s image optimization plugin
• svgo
  • Popular SVG optimizer
  • All plugins mentioned before use SVGO for SVG optimization

For example, in the case of using Sharp and SVGO, asset optimization options would look something like this:

build.assetOptimization = {
  svg: {
    multipass: true,
    plugins: ["sortAttrs"],
  },
  png: {
    quality: 100,
  },
  jpg: {
    quality: 80,
  }
};

Decision on the basic tool used is open to discussion, and each tool should follow same logic when Lightning CSS was introduced, or if project uses Sass as preprocessor: project peer dependancy if user want’s to use asset optimization.

Alternative

As already mentioned, waiting for Rollup transformAsset hook is one solution, but I’m not sure how will that cover all the cases Vite additionaly covers, since Vite is a much more complex and feature complete tool.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.