Thread

1. efortis · 1790493242 · focus · HN ↗

   There's room for improvement still. Currently, the production build is using long-dev class names. e.g. `DirectoryContent-module__Box_3__gl6dE` could be compiled to a shorter hash like `gl6DE3a2`.

   If you use Vite:

     css: {
       modules: {
         generateScopedName: mode === 'production'
           ? '[hash:base64:8]'
           : '[name]__[local]___[hash:base64:5]',
         }
       }

   1. robin_reala · 1790495413 · focus · HN ↗

      Those class names surely gzip better than hashes over the wire?

      1. efortis · 1790496538 · focus · HN ↗

         Here's a comparison using `brotli --best` on my app.

            53K _long.css
            38K _short.css
         
            11K _long.css.br
           8.9K _short.css.br
         

         Both, dev and prod, have hashes because that's part of what CSS Modules uses to avoid collisions.

         Besides download size, smaller names improve parsing speed too.

         1. silvestrov · 1790514158 · focus · HN ↗

            Personally I don't think this reduction in size is big enough compared to making all css names unreadable and thus very difficult to debug.

            It also makes it much more difficult to create personal browser extensions as all css names are now unreadable.

            1. edoceo · 1790538760 · focus · HN ↗

               Use a source map, lots of tools do that for the Js and CSS build process.

Unofficial Hacker News client; not affiliated with Y Combinator.