Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minify post css class names in production #62733

Open
wants to merge 5 commits into
base: canary
Choose a base branch
from

Conversation

Mad-Kat
Copy link

@Mad-Kat Mad-Kat commented Mar 1, 2024

Fixes #62731

In DEV mode we want to keep readable css module identifiers so that developers know where they have to look. In PROD mode however we want to have optimized code so that the deployed site can be viewed as fast as possible. We stumbled upon css module identifiers that weren't optimized in production and I think this new option minifiedCSSClassNamesForCSSModules would help in that regards.

I was inspired by this gist that shows how important css identifier minification can be, especially in larger projects.

before

<footer class="veryVeryVeryVeryVeryVeryLongModuleName_footer__UEyfO">...</footer>

after

<footer class="k396zdJ">...</footer>

I created a very small example here where this optimization would save around 40 Bytes (326 B vs 282 B) only because we changed the class names.

The calculated hash collision probability should be ~ 0.00019 (with 5000 files) and around ~0.00300 (with 20k files).

Please have a look and guide me into the right direction (it's my first time contributing here 😅 )

@omerman
Copy link

omerman commented Mar 5, 2024

Thank you for this initiative, I for one would love to see this feature working in nextjs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Optimize CSS Modules classnames
3 participants