Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS bundling issue with lazy components #11404

Open
1 task done
patheticGeek opened this issue Jul 3, 2024 · 8 comments
Open
1 task done

CSS bundling issue with lazy components #11404

patheticGeek opened this issue Jul 3, 2024 · 8 comments
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@patheticGeek
Copy link

patheticGeek commented Jul 3, 2024

Astro Info

Astro                    v4.7.0
Node                     v20.10.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When we have a lazy loaded component, its css is still getting bundled into the page's css

Consider the following component tree: (in stackblitz example)

  • pages/index.astro (astro page)
    • Loader.jsx (react component)
      • LazyLoaded.jsx (lazy loaded react component, loaded on condition)

Now what happens is:

  • When i load the / page it contains css for all three components, even if the bundle for LazyLoaded.jsx is not yet loaded.
  • When i click a button to render LazyLoaded component, the js bundle for it is loaded and also a css file is loaded which contains css loaded in that component. This css was already in the page so is a waste request and duplicates styles.

What's the expected result?

When we load the / page, i would expect

  • the css in page to only contain css added in: index.astro & Loader.jsx
  • the css in LazyLoaded.jsx should be loaded when js file for it is requested

My initial goal for doing all this is:

I want to utilize inlineStylesheets: always to have all styles inlined on the page except for the components which are lazy loaded (modals etc).

Before someone shouts this is bad, this is to optimize for fp/fcp & cls. Our pages render from cached data & avg. page size is less than 50kb with styles inlined so is okay to do. This is what we were already doing with nextjs, dont wanna loose on this critial css optimization in migrating to astro.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-jsmmdp

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Jul 3, 2024
@matthewp
Copy link
Contributor

matthewp commented Jul 3, 2024

This is an architectural issue with how Astro bundling works. All CSS imported on a page gets bundled together. There isn't a way to dynamically add CSS the way that you'd want it to due to streaming.

@matthewp matthewp closed this as not planned Won't fix, can't repro, duplicate, stale Jul 3, 2024
@patheticGeek
Copy link
Author

patheticGeek commented Jul 3, 2024

but the components explicitly behind a lazy boundary shouldn't have their CSS loaded as it would already be in that chunk.
or at the very least the CSS shouldn't be loaded twice & duplicated 🤔
that seems like a bug that css is added in both, the page & the lazy chunk

@matthewp
Copy link
Contributor

matthewp commented Jul 3, 2024

Does your example show duplication occuring?

@matthewp matthewp reopened this Jul 3, 2024
@patheticGeek
Copy link
Author

patheticGeek commented Jul 3, 2024

yes. checking the example once 🤔 it was for me

@patheticGeek
Copy link
Author

the .lazy-loaded class appears in the page css (with any inlineStylesheets value) and is also loaded in the css file which is loaded when LazyLoaded.jsx's chunk is loaded

@patheticGeek
Copy link
Author

confirmed, you can build and preview the example i have added, the css is being duplicated in it
it appears in the initial <style> tag and also the lazy loaded css bundle
ps. sorry for spamming the notis

@patheticGeek
Copy link
Author

Any updated on this?

@ematipico ematipico added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs triage Issue needs to be triaged labels Aug 15, 2024
@apatel369
Copy link
Contributor

apatel369 commented Oct 17, 2024

I think this vite PR will help to fix this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

4 participants