В большинстве проектов управление размером файлов 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 больше никогда не будет увеличиваться, и в наш класс будет добавлена просто ссылка.