PurgeCSS: удаление неиспользуемого кода CSS

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

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

Удаление ненужного кода ускорит загрузку вашего сайта, потому что браузер будет запрашивать и анализировать меньше кода. В этом уроке мы рассмотрим PurgeCSS, инструмент для удаления неиспользуемого кода CSS. Используя PurgeCSS как часть процесса разработки, мы можем легко удалить неиспользуемый CSS, что приведет к уменьшению файлов CSS и улучшению приложения в целом. Давайте начнем!

Почему следует использовать PurgeCSS?

Хотя PurgeCSS — не единственный инструмент для удаления неиспользуемого CSS, он выделяется своей модульностью, простотой использования и широким набором параметров настройки.

Модульность

Модульность позволяет разработчикам создавать экстракторы модулей для конкретных случаев использования и сред. Экстрактор — это функция, которая считывает содержимое файла и извлекает список используемых селекторов CSS.

PurgeCSS предоставляет очень надежный экстрактор по умолчанию, который может работать с широким спектром типов файлов. Однако по умолчанию PurgeCSS игнорирует неиспользуемый код CSS, содержащий специальные символы, такие как @ , : и /. Таким образом, PurgeCSS может не подойти для конкретного типа файла или структуры CSS, которую вы используете.

Широкий спектр возможностей настройки

PurgeCSS имеет широкий спектр опций, которые позволяют настроить его поведение в соответствии с вашими потребностями. Например, PurgeCSS включает параметры для fontFace, keyframes, extractors, css и т. д. Настройка может повысить производительность и эффективность PurgeCSS.

Простота использования

С PurgeCSS очень легко начать работу. Он включает в себя подробную документацию. PurgeCSS очень популярен среди разработчиков: еженедельно его скачивают 1,9 млн раз и он имеет 6,5 тыс. звезд на GitHub.

Приступим

Откройте терминал и выполните следующую команду, чтобы установить React используя create-react-app:

npx create-react-app purgecss-tutorial

Затем перейдите в каталог purgecss-tutorial, который мы только что создали:

cd purgecss-tutorial

Теперь установите PurgeCSS и его зависимости:

npm i --save-dev @fullhuman/postcss-purgecss glob-all purgecss-webpack-plugin

Откройте файл App.js и вставьте следующий код:

import React from 'react';
import "./App.css"; function App() { return <div className="App"></div>;
} export default App;
</pre <p>В приведенном выше коде мы создали функциональный компонент с именем App и вернули div с className = App. Наш App.css остался нетронутым, он содержит следующий неиспользуемый код CSS:</p> <pre class="lang:css">
.App { text-align: center;
} .App-logo { height: 40vmin; pointer-events: none;
} @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; }
} .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;
} .App-link { color: #61dafb;
} @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

Откройте файл package.json и добавьте следующую строку в раздел scripts:

"postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"

post — это префикс, который можно добавить к любому скрипту npm и который будет автоматически запускаться при запуске основного скрипта. В нашем случае postbuild запускается после выполнения скрипта build.

Команда, выполняемая postbuild, содержит три параметра. Параметр —css указывает, какие файлы CSS должен обрабатывать PurgeCSS. Это может быть массив имен файлов или globs. Параметр —content аналогичен параметру —css и указывает, какой контент должен быть проанализирован с помощью PurgeCSS. Параметр —output указывает, в какой каталог вы должны записывать очищенные файлы CSS. По умолчанию он помещает результат в консоль.

По сути, команда, выполняемая postbuild, делает следующее:

Наконец, извлеките Create React App, чтобы открыть конфигурацию веб-пакета, предлагаемую исходным Create React App. После извлечения мы изменим файл config/webpack.prod.conf.js, добавив в него следующий код вместе с остальным импортом:

// import PurgeCSS webpack plugin and glob-all
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

Непосредственно перед новым ManifestPlugin(…) в списке плагинов добавьте следующий код:

new PurgecssPlugin({ paths: [paths.appHtml, ...glob.sync(`${paths.appSrc}/**/*`, { nodir: true })] }),

Плагин веб-пакета указывает контент, который должен быть проанализирован PurgeCSS, с помощью массива путей. Чтобы убедиться, что вас все получилось, откройте файл CSS в build/static/css. Результат будет выглядить как в приведенном ниже коде, содержащим только используемый CSS:

body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{text-align:center}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

Предостережения PurgeCSS

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

В нашем случае мы добавим специальный комментарий CSS непосредственно в файл CSS. PurgeCSS использует /* purgecss start ignore */ и /* purgecss end ignore */ для безопасного списка правил. Чтобы предотвратить удаление наших комментариев, мы добавим восклицательный знак, чтобы сообщить PurgeCSS, что это важно. См. пример ниже:

/*! purgecss start ignore */
h1 { color: pink; font-size: 2rem;
}
/*! purgecss end ignore */

До PurgeCSS v2.0 неиспользуемые шрифты и код keyframes удалялись по умолчанию. Однако при неправильном использовании этих функций код ломался. Теперь, по умолчанию, неиспользуемые шрифты и keyframes остаются нетронутыми. Вы можете изменить это поведение, установив для параметров keyframes и font-faces значение true.

Заключение

В этой статье мы рассмотрели PurgeCSS, инструмент для удаления неиспользуемого CSS из вашего кода, тем самым уменьшая размер файла и улучшая оптимизацию. Мы рассмотрели основные предложения PurgeCSS, включая его модульность, возможности настройки и простоту использования. Также мы рассмотрели шаги, необходимые для начала работы с PurgeCSS, и несколько предостережений, которые следует учитывать.

Даже если вы решите использовать другие фреймворки CSS, такие как TailwindCSS, Bootstrap, MaterializeCSS или Foundation, PurgeCSS должен работать идеально. Надеюсь, вам понравилась эта статья!

Автор: Hamsa Harcourt

Источник: blog.logrocket.com

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

Читайте нас в Telegram, VK, Яндекс.Дзен