#t

20 messages · Page 1 of 1 (latest)

raven folio
#

Why astro bundles even small scripts, like prefetch one, in separate module and has two hops to reach it instead of inlining it?

astral umbraBOT
#

Hi @raven folio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro does actually inline small scripts rather than serving them as separate modules. According to the documentation, script processing includes automatic inlining: "If the script is small enough, Astro will inline it directly into the HTML to reduce the number of requests." [Script processing]

A similar behavior applies to CSS: by default, Astro inlines stylesheets smaller than 4kB directly into the HTML as <style> tags, and only links larger ones externally. [Production styles]

So if you're observing the prefetch script being loaded as a separate module with two network hops, it's likely because the script exceeds Astro's inlining threshold. You can influence this threshold via Vite's assetsInlineLimit build option:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    build: {
      assetsInlineLimit: 1024, // adjust size in bytes
    }
  }
});

The knowledge sources don't provide the exact size threshold used specifically for scripts (only for CSS it's mentioned as 4kB), so I can't give you a precise number for scripts. If you want to force a specific script to always be inline and unprocessed, you can use the is:inline directive, though this opts out of bundling, TypeScript support, and deduplication. [is:inline directive]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@raven folio Kapa.ai is still learning and improving, please let me know how I did by reacting below.

raven folio
#

if I configure assetsInlineLimit, do I need to configure inlineStylesheets separately or it is sorted out too?

#

@astral umbra if I configure assetsInlineLimit, do I need to configure inlineStylesheets separately or it is sorted out too?

astral umbraBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Yes, you need to configure them separately — they control different things.

  • vite.build.assetsInlineLimit sets the byte threshold below which Vite inlines assets (scripts, images, and CSS) as base64 or inline content. [Production styles]

  • build.inlineStylesheets is Astro's own option that controls whether project CSS is sent as external stylesheets or inlined into <style> tags, with three modes: 'always', 'auto', or 'never'. [build.inlineStylesheets]

The docs explicitly note that assetsInlineLimit affects script and image inlining as well, not just CSS. However, Astro's build.inlineStylesheets operates on top of that and takes precedence for stylesheet handling specifically. [Production styles]

In practice:

  • If you set inlineStylesheets: 'auto' (the default), Astro uses assetsInlineLimit as the size threshold to decide whether to inline stylesheets.
  • If you set inlineStylesheets: 'always' or 'never', that overrides the size-based logic entirely for stylesheets, regardless of assetsInlineLimit.

So for scripts, adjusting assetsInlineLimit is sufficient. For stylesheets, you may need to configure build.inlineStylesheets separately if you want behavior that differs from the size-based default.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@raven folio Kapa.ai is still learning and improving, please let me know how I did by reacting below.

raven folio
#

but auto is the default @astral umbra

astral umbraBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You're right, and that's a good clarification. Since build.inlineStylesheets defaults to 'auto', it already uses assetsInlineLimit as its size threshold out of the box. [build.inlineStylesheets]

So in the default setup, adjusting assetsInlineLimit alone is enough to control the inlining threshold for both scripts and stylesheets — you don't need to touch build.inlineStylesheets unless you want to override the size-based logic entirely with 'always' or 'never'. [Production styles]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@raven folio Kapa.ai is still learning and improving, please let me know how I did by reacting below.

patent latch
#

@astral umbra hey

astral umbraBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Hey! How can I help you with Astro today?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@patent latch Kapa.ai is still learning and improving, please let me know how I did by reacting below.

patent latch
#

@astral umbra What u can do?

astral umbraBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm kapa.ai, an AI assistant specialized in answering questions about Astro, the web framework. I can help you with things like:

  • Troubleshooting errors and common issues in Astro projects
  • Configuration (astro.config.mjs, TypeScript, Vite options, etc.)
  • Features like Islands architecture, content collections, view transitions, client directives, and more
  • Integrations with frameworks like React, Vue, Svelte, and others
  • Deployment & adapters
  • Dev toolbar, routing, scripting, styling, and other Astro-specific topics

Feel free to ask me anything Astro-related! 🚀

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: