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
Currently all styles are extracted to a single file then loaded at page entry. However, some components maybe async, e.g.:
exportdefaultdefineAsyncComponent({loadingComponent: LoadingIcon,loader: ()=>Promise.all([import('lib'),import('lib/style.css'),]).then([lib])=>defineComponent({// actual component})),});// or something like while calling it with defineAsyncComponent// component.tsimport'lib/styles.css';exportdefaultdefineComponent({setup: ()=>{onMounted(()=>{import('lib').then([lib])=>{// do something });},});// client.tsexportdefault{enhance: ({app})=>{app.component('component',defineAsyncComponent(()=>import("./component.ts"))):
},}
In this case, lib/style.css should better be loaded with the component, i.e., the time entering a page that has that component.
With a lot of async components with styles, the main CSS can be at large size, while a large part of style declarations unused in page.
Suggested solution
Add support for ?lazy to mark a css, and left it without being extracted, this could be difficult as we must develop vite plugin and webpack loader.
exportdefaultdefineAsyncComponent({loadingComponent: LoadingIcon,loader: ()=>Promise.all([import('lib'),import('lib/style.css?lazy'),// won't be extracted]).then([lib])=>defineComponent({// actual component})),});// or something like while calling it with defineAsyncComponent// component.tsimport'lib/styles.css?lazy';// won't be extractedexportdefaultdefineComponent({setup: ()=>{onMounted(()=>{import('lib').then([lib])=>{// do something });},});// client.tsexportdefault{enhance: ({app})=>{app.component('component',defineAsyncComponent(()=>import("./component.ts"))):
},}
Alternative
Support ?inline modifier for webpack lite vite does, so we can import style content and load them with functions like useStyleTag from @vueuse, e.g.:
exportdefaultdefineAsyncComponent({loadingComponent: LoadingIcon,loader: ()=>Promise.all([import('lib'),import('lib/style.css?inline'),]).then([lib,{default: style])=>defineComponent({// actual componentsetup(){useStyleTag(style,{id: 'ComponentName'});// ...},})),});
Additional context
No response
The text was updated successfully, but these errors were encountered:
Mister-Hope
changed the title
[Feature request] [Feature Request] Support ?lazy for vite and webpack or at least ?inline for webpack
[Feature request] Support ?lazy for vite and webpack or at least ?inline for webpack
Jun 8, 2023
Clear and concise description of the problem
Currently all styles are extracted to a single file then loaded at page entry. However, some components maybe async, e.g.:
In this case,
lib/style.css
should better be loaded with the component, i.e., the time entering a page that has that component.With a lot of async components with styles, the main CSS can be at large size, while a large part of style declarations unused in page.
Suggested solution
Add support for
?lazy
to mark a css, and left it without being extracted, this could be difficult as we must develop vite plugin and webpack loader.Alternative
Support
?inline
modifier for webpack lite vite does, so we can import style content and load them with functions likeuseStyleTag
from@vueuse
, e.g.:Additional context
No response
The text was updated successfully, but these errors were encountered: