Too many files loaded on first Load

[ekaterina4952]

Hi, I'm using vite-plugin-pwa, and while it works great overall, I've noticed the initial page load is quite slow, taking around 2-3 seconds.
From my logs, it looks like the first page load is pulling over 100 files. I guess I might have missed a specific configuration. Any ideas or suggestions on how to resolve?

[userquin]

This is required to allow run the app when offline: workbox build will add all your dist folder assets using globPatterns to the sw precache manifest, once the service worker is installed in the client, it will download all those assets adding them to the client local storage.

You can inspect the sw.js (the default service worker name) file created in the dist/build output folder at build time. workbox runtime modules used in your service worker will download those assets 1 by 1 to avoid network bottleneck and so your app will still work while the service worker downloading and storing app assets in the cache storage.

[userquin]

I guess the initial page load time is not related to the PWA. Can you try in your local setting disabled: true + build + vite preview?

[userquin]

what framework lib (vanillajs, vue, react, preact, svelte, solid...) or framework (Nuxt, SvelteKit, SolidStart...) are you using?

[userquin]

Is your local dev environment also slow on initial page load (without the pwa)? If so, you can try running Vite profiler to check what's the problem.

From your GH account I guess you're using react: you can check this comment to start the profiler excalidraw/excalidraw#6713 (comment)

[ekaterina4952]

@userquin yes, I’m not sure if this issue is directly related to Vite-PWA, but personally, I think it might have something to do with PWA behavior. As you know, PWAs need to store all JS files in the browser during the initial load. in general, this works fine because the page displays when you open a new tab, even though the files are still loading in the background. Users don’t notice anything unusual.

However, when I apply a new update, the page shows a blank screen. When I check the browser network activity, I see that all the files are still being loaded. Once the index.html file finishes loading and I refresh the browser, the page displays correctly.

I’m using CRA (Create React App) and hosting on Vercel. I hope this explanation makes sense. I sincerely appreciate your time and help!

[userquin]

Check https://vite-pwa-org.netlify.app/guide/auto-update.html#automatic-reload (you should use virtual:pwa-register/react module): automatic reload <> page reload (using the previous virtual module or vanillajs (virtual:pwa-register) version page should be reloaded):

Add import('virtual:pwa-register').then(({ registerSW }) => registerSW({ immediate: true })) to your main entry point and this to vite-end.d.ts:

/// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/vanillajs" />

Checl also cache header here: https://vite-pwa-org.netlify.app/deployment/#cache-control

Check previous changes in your local with vite build && vite preview,you will need to run them twice modifiying some asset between them.