precaching over 1000 assets damages performance

Question

I'm using Vue CLI PWA workbox plugin mode. My app has more than 1000 assets, and precaching them results in very bad performance. Please, check it out:

https://nikudu.com/

Is there a way to precache files more specificly? For example, precache files by URL. On url x/y only precache files 1,5,6 and on url x/v precache files 7,8,2.

Answer 1

I have worked with PWAs and Angular, so no experience with Vue. That said, I would suggest to pre-cache only your shell app (hence the minimum static assets/js that you want to present to the user, when accessing the app offline).

For the other images you can use a lazy approach and cache the images only after they have been requested once (but I do not know if this goes against your requirements).
From this point you could even expand your logic to define, which are the most used routes and preload only those images in the background, once the user lands on the app.

If you are interested, I wrote an article about Service Workers and caching strategies independent from Angular, therefore you can use the same concepts in your app too.