Astro build outputs dozens of js files for all frameworks | Astro Lounge | Page 1

lime marlin Jun 17, 2025, 3:47 PM

#

Astro v5.7.13
Node v22.15.0
System macOS (arm64)
Package Manager npm
Output static
Adapter none
Integrations none

lime marlin Jun 17, 2025, 4:26 PM

#

Looks like this is default behavior, as a dev on our team added a bunch of pages that caused this

#

We're using Astro as a frontend dev sandbox to build UI for a backend CMS team. So, we don't need a fully working Astro app. All I need output is a single bundled CSS file and items from the public folder, but the default in Astro automatically outputs all this stuff based on pages. This makese sense for it's standard use case, but I need to customize ours. Can anyone point me in the right direction for how to customize the build to only do what we need?

marble sparrowBOT Jun 17, 2025, 5:06 PM

#

Houston, we have a problem... and <@&1129102257422610512>, you’re our mission control! 🚀

stuck atlas Jun 17, 2025, 7:38 PM

#

Hi @lime marlin
This is code splitting that you see at work, here. Astro isn't handling per se, it's the bundler that does it.
Astro uses "Vite" as its bundle orchestrator, so this is where you should look.

#

The behaviour of vite can be changed inside your astro.config.ts, under the vite field.

#

You can try things like this:

vite: {
    build: {
        cssCodeSplit: false,
        cssMinify: false,
        minify: false
    }
}

https://vite.dev/config/build-options

vitejs

Build Options

Next Generation Frontend Tooling

lime marlin Jun 17, 2025, 8:17 PM

#

Thanks

#

I've been playing with that and finding it hard to get what I want. I want Astro to function in it's default way when running npm run dev, for local development. But when I run npm run build, I want only one CSS file that is based on a single entry CSS file.

stuck atlas Jun 17, 2025, 8:28 PM

#

And the cssCodeSplit: false doesn't help?
What are you using to write your CSS?

lime marlin Jun 17, 2025, 8:32 PM

#

tailwind

#

cssCodeSplit appears to do what I need

#

is there a way to detect dev vs build in the astro config?

hallow salmon Jun 17, 2025, 8:42 PM

#

https://docs.astro.build/en/reference/configuration-reference/#server-options ?

Docs

Configuration Reference

stuck atlas Jun 17, 2025, 8:50 PM

#

lime marlin tailwind

Interesting, I've always had a single CSS file produced by Tailwind. 🤔
It's supposed to be the whole point, it generates a single very small file that can be served on every page.

lime marlin Jun 17, 2025, 9:44 PM

#

I want to be able to define conditional items in the astro config based on if it's local dev or build

#

@stuck atlas I'm not seeing examples of that in the config referrence. Am I missing it? is it possible?

#

or I could use env variables, I suppose

rapid pelican Jun 17, 2025, 9:51 PM

#

That is all being included do to your usage of Shiki (code blocks highlighting)

#Astro build outputs dozens of js files for all frameworks