The astro build command isn’t fully optimized yet.

[truongtom1993]

I wrote a Header component using SolidJS and embedded it into the Layout with the client:load directive. When building in SSG mode, I noticed a performance issue:
• All 500 articles that use the Layout include the same script block, which contains the content of the Header file.

What I mean is, why not place that code into a single script file and simply include a link to it? This way, the browser can cache the file, and when navigating between articles, the large block of code doesn’t need to reload every time.

Currently, I’m working around this issue by writing a small Node.js script that modifies all the built articles after the build process. The script consolidates the duplicated code into a single file and replaces the code in all articles with a <script src> link. It’s working well so far.

I’ve also noticed a similar problem with CSS files. If I import a SCSS file inside an Astro island, the content of that SCSS file gets embedded in all the articles when built. This becomes a nightmare when I write a lot of CSS because the generated HTML files end up bloated with duplicated styles inside <style> tags. This not only slows down the build process but also forces the browser to reload the same styles when navigating between articles.

To temporarily solve this, I converted the SCSS into a single CSS file and included it in the as a link:

{!import.meta.env.DEV && <link rel="stylesheet" href="/styles/index.css" />}

Because Astro doesn’t compile SCSS for me by default, I added a script to my package.json to handle it and run it before the build:

"build:css": "sass src/styles/index.scss public/styles/index.css --style compressed",
"build": "npm run build:css && astro build"

This solution works efficiently for now, but I hope the team will introduce updates to improve performance in future releases.

[truongtom1993]

[ematipico]

Can you please use the template provided?

[delucis]

What I mean is, why not place that code into a single script file and simply include a link to it? This way, the browser can cache the file, and when navigating between articles, the large block of code doesn’t need to reload every time.

Astro respects the build.assetsInlineLimit option from Vite. If scripts or styles fall below this size threshold (4 KiB by default) they are inlined to avoid the overhead of an additional network request — this is a trade-off vs caching that can make sense for small enough assets, but may require measurement and tweaking for an individual project.

You can set this option to have more control over when inlining happens:

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

export default defineConfig({
  vite: {
    build: {
      // Example: only inline assets that are 1 KiB or smaller
      assetsInlineLimit: 1024,
    },
  },
})