Маловероятно, что вы будете использовать все функции, предлагаемые в рамках CSS, а это означает, что неиспользуемый код останется в вашем конечном приложении. Неиспользуемый код может привести к увеличению размера файла, снижению производительности, усложнению отслеживания каждого элемента и возникновению проблем с оптимизацией.
Удаление ненужного кода ускорит загрузку вашего сайта, потому что браузер будет запрашивать и анализировать меньше кода. В этом уроке мы рассмотрим PurgeCSS, инструмент для удаления неиспользуемого кода CSS. Используя PurgeCSS как часть процесса разработки, мы можем легко удалить неиспользуемый CSS, что приведет к уменьшению файлов CSS и улучшению приложения в целом. Давайте начнем!
Почему следует использовать PurgeCSS?
Содержание статьи:
Хотя PurgeCSS — не единственный инструмент для удаления неиспользуемого CSS, он выделяется своей модульностью, простотой использования и широким набором параметров настройки.
Модульность
Модульность позволяет разработчикам создавать экстракторы модулей для конкретных случаев использования и сред. Экстрактор — это функция, которая считывает содержимое файла и извлекает список используемых селекторов CSS.
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
PurgeCSS предоставляет очень надежный экстрактор по умолчанию, который может работать с широким спектром типов файлов. Однако по умолчанию PurgeCSS игнорирует неиспользуемый код CSS, содержащий специальные символы, такие как @ , : и /. Таким образом, PurgeCSS может не подойти для конкретного типа файла или структуры CSS, которую вы используете.
Широкий спектр возможностей настройки
PurgeCSS имеет широкий спектр опций, которые позволяют настроить его поведение в соответствии с вашими потребностями. Например, PurgeCSS включает параметры для fontFace, keyframes, extractors, css и т. д. Настройка может повысить производительность и эффективность PurgeCSS.
Простота использования
С PurgeCSS очень легко начать работу. Он включает в себя подробную документацию. PurgeCSS очень популярен среди разработчиков: еженедельно его скачивают 1,9 млн раз и он имеет 6,5 тыс. звезд на GitHub.
Приступим
Откройте терминал и выполните следующую команду, чтобы установить React используя create-react-app:
JavaScript npx create-react-app purgecss-tutorial
| 1 | npx create-react-app purgecss-tutorial |
Затем перейдите в каталог purgecss-tutorial, который мы только что создали:
JavaScript cd purgecss-tutorial
| 1 | cd purgecss-tutorial |
Теперь установите PurgeCSS и его зависимости:
JavaScript npm i –save-dev @fullhuman/postcss-purgecss glob-all purgecss-webpack-plugin
| 1 | npm i –save-dev @fullhuman/postcss-purgecss glob-all purgecss-webpack-plugin |
Откройте файл App.js и вставьте следующий код:
JavaScript 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); } }
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 | 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:
JavaScript “postbuild”: “purgecss –css build/static/css/*.css –content build/index.html build/static/js/*.js –output build/static/css”
| 1 | “postbuild”: “purgecss –css build/static/css/*.css –content build/index.html build/static/js/*.js –output build/static/css” |
post — это префикс, который можно добавить к любому скрипту npm и который будет автоматически запускаться при запуске основного скрипта. В нашем случае postbuild запускается после выполнения скрипта build.
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Команда, выполняемая postbuild, содержит три параметра. Параметр —css указывает, какие файлы CSS должен обрабатывать PurgeCSS. Это может быть массив имен файлов или globs. Параметр —content аналогичен параметру —css и указывает, какой контент должен быть проанализирован с помощью PurgeCSS. Параметр —output указывает, в какой каталог вы должны записывать очищенные файлы CSS. По умолчанию он помещает результат в консоль.
По сути, команда, выполняемая postbuild, делает следующее:
Проверяет каждый файл CSS в вашем build/static/css
Сопоставляет селекторы, используемым в ваших файлах, и удаляет все неиспользуемые CSS.
Создает новый файл CSS в build/static/css
Наконец, извлеките Create React App, чтобы открыть конфигурацию веб-пакета, предлагаемую исходным Create React App. После извлечения мы изменим файл config/webpack.prod.conf.js, добавив в него следующий код вместе с остальным импортом:
JavaScript // import PurgeCSS webpack plugin and glob-all const PurgecssPlugin = require(‘purgecss-webpack-plugin’) const glob = require(‘glob-all’)
| 123 | // import PurgeCSS webpack plugin and glob-allconst PurgecssPlugin = require(‘purgecss-webpack-plugin’)const glob = require(‘glob-all’) |
Непосредственно перед новым ManifestPlugin(…) в списке плагинов добавьте следующий код:
JavaScript new PurgecssPlugin({ paths: [paths.appHtml, …glob.sync(`${paths.appSrc}/**/*`, { nodir: true })] }),
| 123 | new PurgecssPlugin({ paths: [paths.appHtml, …glob.sync(`${paths.appSrc}/**/*`, { nodir: true })] }), |
Плагин веб-пакета указывает контент, который должен быть проанализирован PurgeCSS, с помощью массива путей. Чтобы убедиться, что вас все получилось, откройте файл CSS в build/static/css. Результат будет выглядить как в приведенном ниже коде, содержащим только используемый 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)}}
| 1 | 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, что это важно. См. пример ниже:
CSS /*! purgecss start ignore */ h1 { color: pink; font-size: 2rem; } /*! purgecss end ignore */
| 123456 | /*! 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
Источник: webformyself.com