Стратегия однобуквенных классов в css-modules

, Александр Мышов

Денис Хрипков написал статью про оптимизацию генерируемого кода css-модулей — "Как уменьшить размер бандла — стратегия однобуквенных классов в css-modules".

По умолчанию в css-модулях генерируются имена классов, которые плохо сжимаются gzip/brotli. В статье предлагается альтернативный способ формирования имён. Каждый класс файле заменяется одной буквой, а после неё подставляется хэш от полного пути css-файла. Получаются такие имена:

/* first.css */
.a_k3bvEft8 { }
.b_k3bvEft8 { }
[...]
/* second.css */
.a_oRzvA1Gb { }
.b_oRzvA1Gb { }
[...]

То есть в рамках одного файла у имён классов появляется общая часть, благодаря чему сжатие становится более эффективно. В примере Дениса при сжатии генерируемых файлов на продакшен проекте удалось сэкономить 40kb.

Советую заглянуть в статью, если используете css-модули в своём проекте.

https://habr.com/ru/post/499162/
https://dev.to/denisx/reduce-bundle-size-via-one-letter-css-classname-hash-strategy-10g6 (перевод на английский)

← На главную