Как удалить неиспользуемый CSS

Как удалить неиспользуемый CSS

От автора: я уже довольно давно ищу инструмент, который позволит удалить в CSS неиспользуемые стили. Есть особая причина, почему я искала такой инструмент. Она заключается в том, что в настоящее время почти каждый разработчик использует множество CSS-фреймворков и библиотек для быстрой и простой разработки интерфейсов, что делает неизбежным увеличение размера CSS-файлов.

Но задумывались ли вы когда-нибудь, сколько стилей CSS, которые импортируются из этих платформ, вы на самом деле используете? Ну, иногда это даже меньше 20%! Так почему все эти неиспользуемые стили должны быть частью вашего кода? Никаких особых причин на то нет.

Purgecss

Вот где Purgecss приходит на помощь. Это инструмент, который помогает удалить неиспользуемый CSS, и его можно применять как часть вашего рабочего процесса разработки. Вот как Purgecss работает под капотом — ему нужно знать следующее:

Файл CSS, который вы хотите очистить

Файлы, которые ему нужно проверить

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Путь назначения нового сгенерированного файла

Итак, из исходного CSS-файла (1) он будет искать стили в ваших HTML-файлах (2), а потом создаст новый CSS-файл (3) только с теми стилями, которые вы на самом деле используете.

Просто. Я уверена, что если вы попробуете его, то сможете уменьшить файл до 60%.

Инструменты сборки

Удивительный факт о Purgecss заключается в том, что вы можете реализовать его в своем рабочем процессе разработки с помощью множества популярных инструментов сборки, таких как:

CLI

JavaScript API

Webpack

Gulp

Rollup

Кроме того, вы также можете использовать его с самыми современными средами JavaScript, такими как:

React

Vue

Next

Nuxt

Как использовать Purgecss

Ниже мы покажем, как реализовать Purgecss с Gulp и Nuxt.js, но вы можете прочитать здесь официальную документацию, чтобы узнать, как его настроить по-разному.

Purgecss с Gulp

Изначально вам необходимо установить пакет с npm или yarn.

или

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

После этого в gulpfile.js вам нужно импортировать пакет, который вы только что добавили:

и после этого вам нужно просто создать задачу следующим образом:

ps. если вы выполняете задачу последовательно, не забудьте запустить эту задачу после того, как вы сгенерируете HTML-файлы. Если вы этого не сделаете, задача выдаст ошибку.

Purgecss с Nuxt.js

В начале, когда я увидела, что Purgecss работает с HTML-файлами, я расстроилась, потому что в последние месяцы я занимаюсь разработкой различных проектов с помощью Nuxt.js, и для меня очень важно оптимизировать файлы. Но, изучая документацию, я обнаружила, что вы можете выполнить Purgecss с самыми современными JS-фреймворками, такими как React, Vue, Next и Nuxt.

Во-первых, вам нужно установить следующие пакеты в проект с помощью npm или yarn:

или же

Теперь в nuxt.config.js вам нужно импортировать их (за пределами экспорта по умолчанию):

Внутри экспорта по умолчанию вы должны добавить это в конфигурации сборки

И все готово! Это все, что вам нужно сделать, чтобы удалить неиспользуемый CSS.

Автор: Alicia Newman

Источник: https://learnworthy.net

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий