Вступление

Purgecss - это инструмент JavaScript, который в основном удаляет неиспользуемые классы CSS из ваших таблиц стилей. Я не знаю, как это работает, но я думаю, что именно так этот инструмент работает. Он делает это, сканируя ваш HTML (или ваши файлы .vue) на наличие классов CSS, а затем сравнивает их с классами в ваших таблицах стилей. Классы, которые появляются как в таблице стилей, так и в HTML, сохраняются, а остальные очищаются.

Прежде чем мы увидим преимущества такого инструмента, важно, чтобы вы осознали невероятную полезность использования существующих кодовых баз вместо написания собственного кода. Прежде всего, решение проблемы, которая уже решена, означает неэффективное использование вашего времени (если только цель не носит чисто образовательный характер или ее не диктуют потребности проекта). Во-вторых, это технически квалифицируется как повторение самого себя, на что большинство инженеров смотрят свысока. Однако главная причина, по которой многократное использование существующего кода чрезвычайно полезно, - это скорость. Наличие существующего кода для работы - это все равно что иметь предварительно построенный дом со всеми колоннами, балками и фундаментом на своих местах. Цвет стен - на ваше усмотрение. Выбор древесины для пола остается за вами. Куда идет ванна? Угадай, что? Выбор за вами. Есть ли у них недостатки? Ага. Ваш дизайн может быть ограничен архитектурой существующей базы. Но когда вы теряете свободу в одном месте, вы получаете свободу в другом. Вы выигрываете время.

Теперь, когда мы определились с полезностью повторного использования существующего кода, мы рассмотрим еще одну проблему, которая возникает при использовании существующего кода CSS для веб-разработки: огромные размеры файлов. Это особенно актуально для некоторых библиотек CSS. Например, tailwindcss, одна из моих любимых библиотек CSS, имеет размер 477.6kb без какого-либо сжатия. Библиотека Bulma, используемая Buefy, имеет размер 205,6 КБ. Размеры других библиотек CSS можно увидеть здесь. Теперь, если ваш проект не будет использовать всю библиотеку, я предлагаю найти способ уменьшить размер таблиц стилей, загружаемых пользователем. Вот где сияет чистка.

Большинство пользователей библиотек CSS заметили невероятное уменьшение размера своих таблиц стилей после использования purgecss. Например, этот пользователь уменьшил размер своего файла с 48кб до 0,65кб! В моем предыдущем посте « Настройка Vue 3 для использования TailwindCSS и PurgeCSS » я показал, что могу уменьшить размер таблицы стилей проекта, в котором используется tailwindcss, с 370 КБ до 3,5 КБ! В этом сила чистки.

Тем не менее, все будет солнечным светом и радугой, пока вы не познакомитесь с использованием библиотеки компонентов Vue, такой как Element UI, Buefy и Vuetify. Допустим, вы создали все приложение, и, наконец, пришло время для сборки и развертывания. Размер сжатого CSS составляет около 500 КБ, и вы намереваетесь удалить ненужные классы CSS с помощью purgecss, настроенного в соответствии с инструкциями в моем предыдущем сообщении. Вы нажимаете npm run build и выпиваете немного воды, пока ждете, пока ваш проект будет построен. Когда процесс сборки будет завершен, вы будете рады видеть, что размер CSS уменьшен до 12 КБ. В восторге от хорошей работы, вы немедленно развертываете тестовый сервер и с нетерпением загружаете домашнюю страницу. Однако ваша улыбка и восторг превратились в шок и недоумение. А где мои стили?, - спросите вы. Таблица, которую вы импортировали из Buefy, больше не отвечает. Компонент переключателя, который вы импортировали из пользовательского интерфейса элемента, стал обычным флажком. Вы не знали, что purgecss удалил все классы css, на которые полагались внешние компоненты Vue. Ой.

Почему так происходит? Я не знаю наверняка, но подозреваю, что когда purgecss встречает такой компонент, как этот компонент таблицы от Buefy ...

… Он не может автоматически идентифицировать его как компонент Vue и что ему необходимо загрузить исходный файл из node_modules. Если он не может загрузить Table.vue из buefy в node_modules, то он не сможет узнать, какие классы CSS использовались ‹b-table› ‹/b-table›. Вот где, я думаю, возникает проблема… и где можно найти решение.

Проблемная демонстрация

Чтобы продемонстрировать проблему, я взял образец кода с веб-сайтов Buefy и ElementUI. Код состоит из макета панели инструментов из ElementUI и таблицы из Buefy.

Когда вы обслуживаете это в браузере с помощью npm run serve, вы получаете следующее…

Выглядит хорошо, правда? Что ж, давайте создадим его для производства с purgecss, настроенным для использования во Vue. Конфигурация Vue Webpack выглядит так…

Запустим npm run build…

Теперь давайте обработаем файлы сборки с помощью live-server и посмотрим, что произойдет.

Ой! похоже, что-то пошло не так.

Это то, что обычно происходит, когда вы очищаете css с помощью библиотек компонентов Vue.

Решение

Решение, которое я использовал для решения проблемы, заключалось в том, чтобы вручную сообщить PurgeCSS, где найти исходный файл для каждого компонента, используемого в проекте. Это было достигнуто путем добавления их путей в параметр пути при создании экземпляра PurgeCSS. Большинство (если не все) библиотек компонентов Vue включают исходные файлы при их установке через NPM. Вам просто нужно искать их в папке node_modules (или в репозитории GitHub).

Вам необходимо выполнить два шага:

1. Перечислите все компоненты, которые вы использовали.

В нашем случае мы использовали:

(a) Из Element-UI: el-container, el-aside, el-header, el-dropdown, el-dropdown-menu, el-dropdown-item, el-main, el-menu, el-submenu, el-menu-item-group, el-menu-item,

(b) Из Buefy: b-field, b-switch, b-table, b-table-column, и b-icon.

2. Найдите все компоненты в папке node_modules и добавьте их пути.

Например, путь к el-контейнеру можно найти в node_modules / element-ui / packages / container / src / main.vue.

Однако будьте осторожны. Некоторые папки содержат более одного компонента. Например, папка dropdown содержит el-dropdown, el-dropdown-menu и el-dropdown-item. И это несмотря на то, что у el-dropdown-menu и el-dropdown-item есть собственная папка. Команда Element UI создала все три элемента в одной папке, а затем импортировала два элемента в папку, используя файлы index.js в корне каждой папки. Следовательно, в этом случае вы импортируете все элементы из раскрывающейся папки.

Конфигурация Vue Webpack в конечном итоге выглядит так:

Поэтому, когда мы снова строим проект…

Теперь PurgeCSS может безопасно удалять неиспользуемые классы CSS. Сохранилось все, кроме двух вещей. Шрифты и анимация. Шрифты San-serif, которые поставлялись с Buefy и Element UI, были удалены вместе с некоторыми анимациями в Element UI, такими как анимация раскрывающегося списка. Я пока не придумал, как их сохранить.

Ограничения

Помимо проблемы со шрифтом, есть еще одна проблема: условно применяемые классы не обнаруживаются. Хороший пример, чтобы проиллюстрировать это, мы будем использовать компоненты Dropdown и Select пользовательского интерфейса элемента.

Оба используют класс el-dropdown__caret-button для отображения символа вставки. Однако компонент выбора условно применяет его. Ниже приведены фрагменты кода:

Результат следующий:

Из-за того, как были написаны компоненты, PurgeCSS не может идентифицировать классы CSS, поэтому не может их сохранить.

Еще одна ловушка, на которую вам, возможно, придется обратить внимание, - это отсутствие зависимости от зависимости в параметре пути. Например, компонент X, который вы импортировали и путь которого вы добавили в PurgeCSS, возможно, также импортировал и использовал другой компонент Y . Вы можете не знать, что он делает это, поэтому вы можете обнаружить, что PurgeCSS все еще удаляет важные классы. Возможно, вам потребуется проверить, какие компоненты X используются, а также добавить их в параметр путей в PurgeCSS.

Заключение

Из того, что мы видели, библиотеки компонентов Vue могут работать с PurgeCSS. Однако ваш опыт может варьироваться в зависимости от того, как была написана библиотека компонентов. Разработчик должен проявить должную осмотрительность, чтобы увидеть, каких ловушек следует остерегаться.

Удачного кодирования.