How to optimize too many css requests #6528
Labels
- P2: nice to have
Not breaking anything but nice to have (priority)
feat: styling
Related to styles (scope)
Comments
|
This usually happens when the component is shared among many places that the CSS get chunked like so, but that looks a bit extreme, if you can provide a repro of how to re-create this (stackblitz/codesandbox/etc), that would be great. |
|
That’s the CSS built in the docs site output 😅 |
|
Ah I didn't see the |
bluwy
added
feat: styling
|
Is the following optimization scheme feasible:
// astro.config.ts
export default defineConfig({
build: {
cssInlineLimit: 1024 * 4
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<style>.test{color:red}</style>
</head>
<body>
<div class="test">test</div>
</body>
</html>
---
import Dialog from '@/components/Dialog.astro'
// OtherDialog.astro
---
<Dialog class="other-dialog">
<div class="other-dialog-box">content...</div>
</Dialog>
<style is:to="body" lang="scss">
.other-dialog {
.other-dialog-box {
width: 600px;
background: #fff;
border-radius: 8px;
}
}
// scss...
</style>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="other-dialog"><div class="other-dialog-box">content...</div></div>
<style>.other-dialog .other-dialog-box { width: 600px;background: #fff;border-radius: 8px}</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="other-dialog hidden"><div class="other-dialog-box">content...</div></div>
<link href="./other-dialog.hash.css" rel="stylesheet">
</body>
</html>
|
|
Closing since a solution has been implemented (currently in experimental https://docs.astro.build/en/reference/configuration-reference/#experimentalinlinestylesheets ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of
astroare you using?2.1.2
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
npm,pnpm
What operating system are you using?
Mac
What browser are you using?
Chrome
Describe the Bug
Link to Minimal Reproducible Example
https://docs.astro.build/en/getting-started/
Participation
The text was updated successfully, but these errors were encountered: