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. NostraDavid · 1790521145 · focus · HN ↗

            Try zstandard instead of Brotli - a clearly superior format, IMO. Definitely better than gzip.

            1. efortis · 1790521984 · focus · HN ↗

               `zstd --ultra`

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

Unofficial Hacker News client; not affiliated with Y Combinator.