Include dynamicAssets during findAssetsInViteManifest

[katywings]

IS

In the production build, css required by dynamically imported (lazy) components is ignored during server rendering, resulting in flashes of unstyled content.

SHOULD

The html rendered by the server should include assets required by dynamically imported components to avoid the flashes of unstyled content.

PROPOSAL

There might be a better way, but by making the following changes to lib/manifest/vite-manifest.js the server will include the assets:

--- vite-manifest.js    2024-03-26 20:35:48.782476412 +0100
+++ vite-manifest-new.js        2024-03-26 20:37:56.720628174 +0100
@@ -30,10 +30,13 @@
 
                stack.push(id);
 
+               const dynamicImports = id.startsWith('virtual:') ? undefined: chunk.dynamicImports
+
                const assets = [
                        ...(chunk.assets || []),
                        ...(chunk.css || []),
                        ...(chunk.imports?.flatMap(traverse) || []),
+                       ...(dynamicImports?.flatMap(traverse) || []),
                ];
                const imports = chunk.imports?.flatMap(traverse) || [];
                const all = [...assets, ...imports].filter(Boolean);

This solution isn't perfect because it doesn't detect if the dynamic import is actually executed during ssr (lazy component loaded).. But this proposal might atleast be a first step, as it opens up the door for css code splitting on a per-route level.

What do you think?

P.S. I can make a PR if you like this :).

[nksaraf]

Yeah the main issue as you suggested is that we don't know if that CSS file is used, so maybe loading it is a mistake. What we should do is maybe preload it? and the lazy component will mount the css when it loads, and the preload should make sure its immediately there.. i think this makes sense but not sure, could use some html css loading expertise here @ryansolid

[katywings]

Yupp, this suggestion basically replaces one tradeoff with a different one ☺️.

I also pinged you in the Solid Discord Suggestions section. There I conceptualized a different solution which would involve changes in multiple fronts (vite plugin/babel, dom-expressions, vinxi), but would result in a very precise css ssr, even for the lazy loaded modules.

https://discord.com/channels/722131463138705510/1222299712850231356

[jean343]

This bug is quite disruptive for us, and the workaround to use cssCodeSplit does not work with solid-start solidjs/solid-start#1324.

The code above works very well, but it effectively pre-loads all dynamic imports, the following code only pre-loads the css portion of dynamic imports.

...(dynamicImports?.flatMap(traverse).filter(i => i.endsWith(".css")) || []),