sveltejs / sveltejs/kit

Add ability to configure cache directory for image conversions in @sveltejs/enhanced-img

Open
#12,615 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:enhanced-img
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

Using the @sveltejs/img:enhanced package generates a large number of cacheable converted image variants in various sizes/formats. This process also takes a long time to run the more images are processed and the more variants that are requested.

The vite-imagetools plugin supports caching these artifacts, which @sveltejs/img:enhanced also supports as of v0.2

It does not seem to be possible to use the configuration options that are built into the vite-imagetools plugin to specify where these cached build artifacts should be saved though when using @sveltejs/img:enhanced.

Describe the proposed solution

I would like to be able to configure the upstream vite-imagetools cache options for use in @sveltejs/enhanced:img.

The upstream PR is here and the documented configuration object for cache options is here.

Perhaps having a config passthrough in the vite.config.js file could be an acceptable solution?

import { enhancedImages } from '@sveltejs/enhanced-img';
export default defineConfig({
  ...
  plugins: [
    enhancedImages({
      cache: {
        dir: './node_modules/.cache/imagetools'
      }
    })
    ...
  ]
});
Alternatives considered

I have setup a cache using the default location that vite-imagetools uses but I would like to manually specify the cache location and bring it outside of the node_modules folder.

Importance

nice to have

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the @sveltejs/enhanced-img package entry points and its integration with vite-imagetools, then compare the upstream cache options linked in the issue. Use the vite.config.js example as the intended interface; done means callers can provide cache settings such as dir and those settings control where converted image artifacts are stored.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
build-system, tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.