Optimizing CSS File Size in Vite

[harshitacodes]

I'm trying to understand how my index.css is being generated. I know that Vite uses esbuild to build the file chunks. However, I want to reduce the size of index.css by removing some unused CSS during the build process. The current size of index.css is quite large, causing it to block other elements from loading and significantly impacting page performance.

Any suggestions on how to achieve this?

Originally posted by @harshitacodes in #341

[Shakeskeyboarde]

That is huge for a css file... is the original that big? If not, are you somehow embedding data urls (images) in it?

[github-actions]

Hello @harshitacodes. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[ArnaudBarre]

I can't really help here, the simplest way to understand what in there is to open it, run prettier on it and see look for reference to libraries or assets and maybe see duplicated sections and then try to debug why this is unexpectedly bundled.

[harshitacodes]

That is huge for a css file... is the original that big? If not, are you somehow embedding data urls (images) in it?

Yes, I mean I am using images, but they are svgs. there are a lot of CSS modules being used in the project, but the issue is that Vite is somehow bundling similar files or CSS and putting them into these two files. I just want to know if there is any way to find out how Vite is creating this index.css file and what patterns it is using to generate it.

[ArnaudBarre]

If you load your JS into two big chunks, then Vite creates two big CSS chunks that where either imported by the JS files from the initial bundle or the second one. Codeplitting is always driven by JS imports

[harshitacodes]

if Codeplitting is always driven by JS imports, then how can we load only critical css? , is there a anyway to confirgue that in the vite configuration file, or any pluggin?

[ArnaudBarre]

You should always locate the CSS with the JS that needs it. Then you should use dynamic import to delay the use of non criticial JS

[harshitacodes]

Do you have any idea about this?
https://github.com/nystudio107/rollup-plugin-critical

I am trying to configure a plugin in vite.config.ts to reduce the size of the generated index.css file. This might help the page load faster by using only the critical CSS.

[ArnaudBarre]

What is the size of your JS? Except if you have megabytes of JS it's not normal to have so much CSS, you're probably bundling things that are unrelated or inlining fonts or images. You need to look for something useless in your CSS instead making the setup more complex

[ArnaudBarre]

Ok so this is clearly an entreprise size application with already a non trivial build setup. I'm sorry but this not part of my open source work to help you optimize this kind of app.