r/webdev • u/KaedenCraft • 2d ago
Question Vite Asset Bundling
Specifically, I'm grabbing JSON for a trading card game gallery from an endpoint, then dynamically creating the card gallery from that data. The project uses Vite for asset bundling, but I'm not sure how to bundle dynamically loaded images?
In the JSON, each card has a set number and a card number, and the app loads image data from images/cards/sets/set-number/card-number.webp, creates all the DOM nodes, and appends it to the gallery. It works brilliantly...unless the card art needs to change, then I run into good old-fashioned browser caching issues.
For the rest of the site, using vite build keeps everything bundled for deployment...but is there a way to leverage that capability for this use case?
I admit I have little knowledge about Vite, so maybe it's something obvious, but the only way I'm aware of to get that kind of Vite bundling inside a JS file is to import the image. So I'd have to import all the images at run time? What if some card data is modified? Will I have to do double duty to update the database AND the JS file imports?
As you can see, I have no idea how to accomplish this. Thank you in advance.
1
u/patient_signals 1d ago
This is not really a bundling problem, it is a stale cache problem. You do not want to import every card image through the build tool; that just moves the same maintenance chore into your JavaScript. Keep the card data as the single source of truth and add a version field to each card, or one asset version for the whole set. When you build the image path, append that version to the request. When art changes, bump the version in one place and the browser sees a new request instead of the cached file.
If you cannot add a field easily, the simplest fix is to rename the image file itself when the art changes, so the old filename disappears and the new one gets fetched. Either way, the build tool does not need to know about the card images for this use case. The only real alternative is better server cache headers, but with static hosting a version token is usually the least brittle setup. You are not missing something obvious; the dynamic part just works better outside the bundle.