Ненавижу длинные и удобочитаемые имена классов, из-за этого исходные коды CSS становятся слишком запутанными. А в рабочей среде читаемые имена классов CSS не нужны.

Да, прошел почти год с тех пор, как я начал искать решения и экспериментировал с множеством способов, пытаясь запутать имена классов CSS - например, интерфейс https://www.google.com/ исходный код. Не более 5 символов, просто предсказуемая комбинация букв алфавита, имя класса становится таким коротким и непонятным. Мне повезло, так как я прочитал это и следил за статьей ниже. Вау, размер уменьшен на 70%, впечатляет, да?



Уменьшение размера пакета CSS на 70% за счет сокращения имен классов и использования изоляции области
Так же, как это делает Google medium.freecodecamp.org



Теперь я покажу, как применить аналогичный прием для оптимизации CSS, созданного vue-loader в приложении Vue.js.

Изменить конфигурацию css-loader и webpack

К сожалению, getLocalIdent параметр из css-loader не работает с CSS, обработанным vue-loader. «Это потому, что запрос vue-loader загрузчиков должен быть преобразован в строку, чтобы опция функции была удалена в процессе», - сказал Эван Ю (автор Vue.js). Я надеюсь, что он скоро найдет решение, чтобы обойти это, но прямо сейчас, добавив 3 строки кода ниже непосредственно в css-loader исходный код, getLocalIdent становится доступным даже с CSS, переданным по конвейеру из vue-loader. Нравится

Делаем имена короткими

Два отличия между моим кодом и Гаюсом Куйзинасом

  1. Вместо использования символа _ для разделения имени компонента и имени локального идентификатора имя компонента вводится в ВЕРХНЕМ РЕГИСТРЕ, а имя локального идентификатора - в нижнем регистре. Поскольку компонентная часть написана в верхнем регистре, нет необходимости удалять букву «d» в 11-й строке. Кроме того, если вы хотите разделить имя класса на компонентную часть и локальную часть-идентификатор для оптимизации изоляции, просто используйте регулярное выражение.
  2. Я использую 2 отдельных генератора идентификаторов, один генерирует идентификатор для компонентной части, а другой генерирует идентификатор для локальной части имени. Теоретически я просто думаю, что это поможет сэкономить пространство имен. Чем меньше пространство имен, тем короче максимальная длина имени.