Minify post css class names in production #62733
Open
+114
−45
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
after
I created a very small example here where this optimization would save around 40 Bytes (
326 B
vs282 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 😅 )