Vitepress and vite-imagetools

[adiroiban]

Hi

Are you guys using vitepress with vite-imagetools ?

Is there any extra configuration required for using vite-imagetools with vitepress ?

I got it running, the cache files are created for imagetools ... but the build is still super slow.

As a test, I have 20 images... and the build time is 120s ... if I don't use the vite-imagetools images, the build is 2s ...

The whole thing is super slow with vite-imagetools... to the point that it's not usable.

Just wanted to check if there is any special config for vitepress.

Thanks!

[brc-dd]

Hmm, searching code on github, I think most people are just using it as is without any custom options. Is your repo public / can you make it reproducible on a public repo? 120s seems too much, sharp is usually very fast.

[adiroiban]

Thanks. Much appreciated.

I will give it a try.

As a workaround I have created a YAML that is used by a script to generate the images and store them in the public folder... and then via images.data.ts I am loading the YAML and return an object with the sources.
But this is a not ideal. I can't import import { withBase } from 'vitepress' in the Build-Time Data Loading ... but I can use withBase in the .vue file... that it's not that bad

[adiroiban]

https://responsive-image.dev/ did the job. Initial build was 20s ...but rebuild was only 4s

So I guess there is no reason to use vite-imagetools

[brc-dd]

I can't import import { withBase } from 'vitepress' in the Build-Time Data Loading

Ah, base is not always available on node side. You probably can export base from a file and import it inside config and your data loader, and just use base + something.

[brc-dd]

but rebuild was only 4s

On CI just this might not cache it properly:

        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm

You'll need to add some step like this too before pnpm docs:build:

      - uses: actions/cache@v4
        with:
          path: ./.vitepress/cache # adjust this depending on vitepress root
          key: ${{ runner.os }}-vitepress-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: ${{ runner.os }}-vitepress-

[adiroiban]

True... I am aware of that... this is why I am building the whole project twice inside GitHub Actions.

The repo is a test repo, so I try to keep it simple

[adiroiban]

Thanks a lot for the help

https://responsive-image.dev/ is so much better ... you can see that initial build takes 11seconds and rebuild is only 3 seconds.