#When running a website with both Astro x starlight it takes/has a huge time/size

135 messages · Page 1 of 1 (latest)

reef grail
#

When running this branch code in astro dev Firefox takes 13 secs to load the code and it's size reported from firefox is:

{
    "Status": "200OK",
    "Version": "HTTP/1.1",
    "Transferred": "46.78 kB (46.65 kB size)",
    "Request Priority": "Highest",
    "DNS Resolution": "System"
}

But also when building it's reported that expressive-code is size of 18.25kb in astro build.

14:17:40 [vite] dist/_astro/ec.j8ofn.css                                           18.25 kB │ gzip:  3.85 kB

Is this normal?

GitHub
GitHub - TeaClientMC/Website at wiki

The Official Website of the TeaClient Project. Contribute to TeaClientMC/Website development by creating an account on GitHub.

merry magnet
#

CC @earnest panther as the resident pro for ExpressiveCode (Creator) would you happen to have some insight as to whats going on? and if this is indeed normal for EC?

reef grail
#

Is there any way to give you system info.

#

Oh wait there is.

#

nix-shell -p nix-info --run "nix-info -m info:

 - system: `"x86_64-linux"`
 - host os: `Linux 6.6.58, NixOS, 24.11 (Vicuna), 24.11.20241026.86e78d3`
 - multi-user?: `yes`
 - sandbox: `yes`
 - version: `nix-env (Nix) 2.24.9`
 - nixpkgs: `/nix/store/y8pbnccb8bc1p8fchx7zkb0874yblrg3-source`
#

Not to mention I have no hmr on tailwind class changes sometimes.

earnest panther
#

Hello! Can you provide a link to the file so I can look what‘s inside?

#

I just checked my CSS for the EC website and there it‘s 21 KB, so nothing unusual.

#

That should not really be an issue on your site, and especially not something causing a slow load. I assume there is something else going on with your setup that is causing issues.

#

As you are using SSR, I rather think that this is Shiki with all its languages increasing the total bundle size (not the CSS, which again is no problem and not particularly big either - we‘re talking about a gzipped size of 3.8kb, so roughly 3800 characters being actually transferred, that‘s nothing on a modern website)

reef grail
#

It's output is set to static.

earnest panther
#

Oh, sorry, I just saw "server" on mobile

#

It might still be Shiki though. Can you try setting expressiveCode: { shiki: false } in your Starlight config options as an experiment?

#

Also, is the slow load you're encountering just the first time opening any page with a code block on the dev server, and after you've done that and navigate around on your site, it's fast?

#

(This would again point to a one-time initialization taking too long, and the most likely cause is Shiki)

reef grail
#

When when I open the home page it loads slow then when I navigate the site i think it's slow to nav to another page.

#

But when disabling shiki it just does this it doesn't say it's hosted.

image.png
#

Yeah it's shiki.

#

Now it just said it was hosted.

earnest panther
#

This hosted message isn't coming from me, not sure what you mean 😄

reef grail
reef grail
earnest panther
#

Aaaah, now I understand! Yeah, the dev server just says it's ready to go!

#

That's how it should be 🙂

#

Hmm. Well I could try upgrading my Shiki dependency to the latest version and hope they have improved the performance

reef grail
#

It's not shiki.

earnest panther
#

Do you have a <Code> component somewhere on the site?

reef grail
#

For some reason when I disabled it it causes to load a huge time.

reef grail
earnest panther
#

Ok then this is also not the cause of any issues.

reef grail
#

Oh wait I do.

#

In a component.

#

I use it in mdx what type of comment do they use?

earnest panther
#

Yeah that's probably the cause then. Astro's bundler doesn't know how to treeshake anything imported from @astrojs/starlight/components

reef grail
#

I forgot.

earnest panther
#

They use JSX, so {/* ... */}

#

The problem isn't the usage, it's the import by the way

#

As soon as you import anything from @astrojs/starlight/components on your site the dev server will be slow

#

This is not a problem on the built site by the way, it's just the dev server

reef grail
#

Okay disabled it.

#

Still loading slow in firefox but server started fast.

earnest panther
#

That the dev server might take some time to load a page is normal

#

The built site is what counts

#

Have you tried astro build and astro preview?

reef grail
#

astro build and astro preview are not slow it's just astro dev.

earnest panther
#

Yeah, I had the same scenario with someone else as well last week. It's just Astro's bundling that is slow during dev on some machines.

#

There is nothing Starlight or I can do about that right now

#

I don't have any of these issues on the machines I'm using, so maybe some expensive file system operations performed by Vite. I don't know, I'm also just guessing sadly

reef grail
#

With astro dev

earnest panther
#

That "waiting" being the longest bar by far (and the others not even recognizable) tells you that Astro is internally calculating how to render the page. It's not the final result that is causing the slowness.

reef grail
#

Comments.

20:02:13   ├─ /wiki/developers/api/mods/index.html[Error] Expected component `Http` to be defined: you likely forgot to import, pass, or provide it.
  Hint:
    This issue often occurs when your MDX component encounters runtime errors.
  Stack trace:
    at _missingMdxReference (/home/eveeifyeve/github/TeaClient/website/dist/chunks/mods_DdcYCIhV.mjs:278:9)
    at <anonymous> (/home/eveeifyeve/github/TeaClient/website/dist/renderers.mjs:13:26)
    at <anonymous> (/home/eveeifyeve/github/TeaClient/website/dist/chunks/astro/server_CRsF0sGR.mjs:1238:33)
error: script "build" exited with code 1
#

It's longer.

#

It takes about 16 or more seconds with astro dev to load the page or when the server recives it.

earnest panther
#

It's really hard for me to help remotely as I don't see what you're doing. 😅

reef grail
#

I mean do you want me to vc?

earnest panther
#

No, I don't think I can help with this anyway 🙂 I think it's not an EC issue, it's an issue with how the Astro dev server works and that it takes too long on your system (which might be related to something with your setup - hardware, virtualization etc.) to process the JS required to render your pages.

reef grail
reef grail
reef grail
earnest panther
#

Sorry, I don't have the time to replicate your setup. I was just trying to help in case it was EC, because there I (mostly 😆) know what I'm doing, but this is highly unlikely an EC issue

reef grail
#

I mean it's still saying 18kb.

image.png
earnest panther
#

That is not a problem at all

#

The actually transferred size is 3.8kb, which is tiny

#

Even your favicon is 6.2kb 😄

earnest panther
#

Just to reiterate, the download size is not causing your slow dev server. It's the JS code that Astro's dev server transforms & runs in order to serve the page you're requesting.

#

So all the internal Astro & Vite dev server magic with hot reloading etc., and this part can sadly get slow when there is a lot of code involved

#

Especially with component imports, the dev server is known to include a lot in the JS bundle, sometimes it feels like half of Astro 😄

reef grail
earnest panther
#

No, there is no easy fix

#

I believe this needs to be solved by Astro or Vite core developers somehow, but I'm not versed enough myself to be able to say how it would even be possible

#

I still think that your hardware & OS setup might be a part of why you're experiencing such slow dev server times though

#

You're using software I've never heard of or used, and it might very well be an issue with support for these

#

Could be your file system performance

#

Could be some virtualization issue

#

Could be some OS libraries that are not fully supported

#

I wish I could help you, but I sadly can't

granite flicker
reef grail
#

Maybe firefox?

#

Cause it's slow for me in stack blitz.

earnest panther
#

It's not slow for me at all, same as Chris

#

Maybe give it a try with a more "mainstream" OS / hardware, and I assume the issue will be gone for you as well

#

Probably some missing optimizations for your platform

reef grail
#

Well that shouldn't be the issue it's just something to do with nixos.

#

Maybe the firewall is having issues?

earnest panther
#

It's impossible to tell for us from afar 😄

#

By the way, I completely optimized the Shiki language loading logic in the latest Expressive Code release 0.38.0, once that lands in Starlight you can try if your issue has been resolved with that as well

#

This does not have an effect on the built site, but local dev server startup & page preparation should be faster

#

The built site is just as fast as before, there was no issue there

reef grail
earnest panther
#

Thank you, but no, that doesn't really help. 😅 I'm trying to tell you that you have a very exotic OS and setup and that I have absolutely no idea why something is slow for you. I am running mainstream OSes (Windows and MacOS) and everything is working as expected.

#

I can only help in areas where I have any experience, and your OS and setup isn't part of that 😄

#

By the way, please don't take what I just wrote as negative in any way, I feel that there might be a language barrier between us, so I'm trying to be as direct and explicit as possible, hoping to get across what I'm trying to say 😄

earnest panther
#

I don't see a big change between your version and my version on Stackblitz with my computer (~1s faster dev server startup, but the home page loads at exactly the same speed), but maybe it's different for you

reef grail
earnest panther
#

Stackblitz

#

I'm comparing your Stackblitz URL to my Stackblitz URL I posted

reef grail
#

seems like this an expressive code issue.

#

On nixOs.

reef grail
reef grail
#

So yeah it's an expressive code issue.

#

I am verifying locally to see if that is the case.

granite flicker
#

That's good news because if Hippo's override improves things, that newer version of Expressive Code will be included by default in the next release of Starlight.

earnest panther
#

Yay, success!

#

I still don't understand why you see such a big difference while we're not seeing it, but I'm glad my new language loading handling could fix this for you

reef grail
#

But also for some reason my file system is slow.

earnest panther
#

Yes, absolutely! I already noticed this in your very first screenshot that showed a server startup time of ~43s or so

#

This is why I kept coming back to your system as a potential cause of the issues

#

Such high numbers are completely unusual

reef grail
#

It's probably nixos limiting it.

#

cause bun cache,

reef grail
earnest panther
#

I somehow get the subtle impression that you're on a mission to make nixos more popular 😄

reef grail
#

XD, I mean the more people who use it arch linux will die.

granite flicker
#

Fryuni is a Nix user and has never mentioned stuff being slow so I doubt it's only the OS.

reef grail
earnest panther
#

Aha, so it's your hardware or additional layers of configuration you have in your setup (virtualization, bun, etc.)

#

probably

granite flicker
reef grail
#

Yeah now the issue is slow filesystem.

#

But yeah I think to be honest you should start testing on nixos XD.

#

I mean nix is being used at idx, cachix, detSys, flox and more.

#

It takes approx 50secs.

#

Instead of 1min and something.

earnest panther
#

I‘m jumping out of this thread now, glad that I could solve this despite the tricky debugging! Thanks for the patience and testing!

reef grail
#

Also the watch is broken for nixos.

#

I just updated the main page and watch didn't detect a change.