В большинстве проектов управление размером файлов CSS является большой проблемой. В вашем коде много повторов, а размер файлов CSS растет в геометрической прогрессии. Через некоторое время вы столкнетесь с большим файлом CSS, который влияет на общую производительность и время загрузки вашего сайта.

Но главный вопрос в том, как решить эту проблему? Вот как:

Начиная

Существует множество подходов к уменьшению размера файла CSS, например удаление пробелов, изменение имени классов и т. Д. Все они хороши и дают хороший результат, но можно ли сделать наш CSS намного меньше? Возможно ли, что размер файла CSS не увеличивается при повторении стилей? Ответ положительный. Существует полезный веб-загрузчик под названием quark-loader, который помогает нам решить эту проблему.

Как работает загрузчик кварка?

Он обработает наши файлы CSS и будет использовать хеш-таблицу для поиска повторяющихся объявлений. Затем он удалит эти объявления, и вместо них quark-loader добавит ссылку на общий атомарный модуль.

Как видно на картинке выше, если у нас есть пять повторов свойства 'top', quark-loader удаляет их все и создает отдельный класс для этого свойства, а затем добавляет ссылку на все классы. Таким образом, если мы добавляем свойство top к другому классу, мы просто добавляем ссылку на наш класс, и размер нашего файла CSS не увеличивается. Давайте рассмотрим реальный тестовый пример. Предположим, что у нас есть два класса wrapper и container, а свойства top и left являются общими свойствами в этих классах.

Перед использованием кварк-загрузчика результат будет примерно таким:

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

  • Без извлечения CSS

  • С извлечением CSS

Как настроить кварк-загрузчик?

Для начала вам нужно установить загрузчик кварка.

npm install --save-dev quark-loader

Затем добавьте загрузчик в конфигурацию вашего веб-пакета и соедините загрузчик кварка с css-loader и style-loader, чтобы сразу же минимизировать и применить все стили к ДОМ.

Выполнено! Бери свою сборку и получай удовольствие!

Заключение

Quark-loader опубликован недавно, и ему предстоит долгий путь, но способ обработки файлов CSS - один из лучших подходов к разработке стилей CSS. На самом деле это гарантирует, что если вы повторите объявление, размер CSS больше никогда не будет увеличиваться, и в наш класс будет добавлена ​​просто ссылка.