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?