You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
My question is whether the css code split is "offically" supported in non-html mode (meaning you define custom .js entry points instead of index.html).
More detailed
Because we use a multi-app / micro-app architecture with JS + PHP and thus need custom JS entry points. This works fine with vite but I noticed CSS code split does not work correctly.
If you have multiple JS entry points the CSS is extracted to multiple chunks but the loading of that CSS files is only done when chunks are dynamically loaded, so I have this issue:
Entry points:
main.js
settings.js
Output chunks:
output-main.js
output-settings.js
dynamic.js
shared.js
CSS chunks:
output-main.css
shared.css
dynamic.css
First problem is there is not even a wrapper for output-settings (e.g. empty css files).
More important problem: other.css is never loaded because other.js is only imported directly in the entry points, but not dynamically, thus the module loading for CSS does not happen. So the styling is broken.
I would have expected that a wrapper per entry point is created (output-main.css and output-settings.css) that @imports all direct dependencies (other.css).
Or at least the module preload loading all split css files that origin from javascript in directly imported chunks.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
My question is whether the css code split is "offically" supported in non-html mode (meaning you define custom
.js
entry points instead ofindex.html
).More detailed
Because we use a multi-app / micro-app architecture with JS + PHP and thus need custom JS entry points. This works fine with vite but I noticed CSS code split does not work correctly.
If you have multiple JS entry points the CSS is extracted to multiple chunks but the loading of that CSS files is only done when chunks are dynamically loaded, so I have this issue:
Entry points:
Output chunks:
CSS chunks:
First problem is there is not even a wrapper for
output-settings
(e.g. empty css files).More important problem:
other.css
is never loaded becauseother.js
is only imported directly in the entry points, but not dynamically, thus the module loading for CSS does not happen. So the styling is broken.I would have expected that a wrapper per entry point is created (
output-main.css
andoutput-settings.css
) that@import
s all direct dependencies (other.css
).Or at least the module preload loading all split css files that origin from javascript in directly imported chunks.
Beta Was this translation helpful? Give feedback.
All reactions