Don't preload all dynamic imports?

[stereokai]

I'm using Vite dynamic imports. When building, Vite has Rollup split them into chunks. So far so good. But: All of these chunks get added to index.html as module-preload. And indeed, irregardless of the run-time dynamic import resolution, all of the chunks do get preloaded. Is there a way to have these dynamic imports lazy-loaded instead of pre-loaded?

[aub]

I'm curious about this as well. We're getting a lot of errors in our app like:

Error: Unable to preload CSS for /assets/BooleanRadioButtonGroup.2ac58c12.css

I think these are due to network errors causing preloads to randomly fail, but I can't figure out how to simulate them to make sure I understand the effect they're having on the user. There also doesn't seem to be a way for me to inject a thing that might retry them. I think ultimately I'd like to turn off preloading, but if I could add retries somehow or else feel confident that this won't affect the user experience then it would be ok.

[stereokai]

Yeah it would just be great having a way to control the behavior

[TuureKaunisto]

I know it's late but since I landed here when I was looking for an answer, this might help someone else. Here's how we ended up solving it:

1. Using only dynamic imports for the module we wanted to lazy load: await import(...)
2. Adding build: { modulePreload: false } to vite.config.ts to prevent a script tag with modulepreload being added to the html file
3. Removing manualChunks from rollupOptions. Otherwise the module we were trying to lazy load got added as a regular import at the top of our index script file, which caused the module to be loaded during page load. Luckily rollup bundled it to a separate file even without setting manualChunks so this happened to work for us.

[cuongdtt]

ManualChunks really load modules even when they are not being used

[GuillaumePrinzivalle]

Hell yeah. Trying to remove matrix-js-sdk to initial load, that was this manualChunks that was preloading it... thanks.

[suryateja-7]

We are facing the same issue,

For Few CSS - We get errors like Error: Unable to preload CSS for <FILE PATH>
For Few JS - We get errors like: Failed to fetch dynamically imported module <PATH>

Were you able to fix the problem in your case / or identify the cause of this ?

[codewithshek]

[TuureKaunisto]

Why would you copy paste my answer instead of for example commenting to @suryateja-7 that it worked for you? Is this an AI generated answer? I wrote my response for people to use and share it freely, and I'm glad you're sharing it. But it makes no sense that you post a duplicate answer on the same page, where the answer is already posted above your answer.

[Amansaxena001]

My issues is slightly un-related but this thread has some attention hence asking it here.

Most of the times we are getting preloadError load failed for which vite suggests doing a fresh reload as the server may be returned the old bundle instead from the lastest deployment one. That is bad as the site would load twice.

Earlier when we didnt add that event listener still our website would load twice. Not sure why its happening.

I really appreciate any suggestions around this

[hempun10]

+1