найти неиспользуемый css код
ITNote
Проблема с очисткой css может возникнуть в 2 случаях:
Запускаем «Covarage» в Chrome
Как и рекомендует Google воспользуемся закладкой «Coverage» в инструментах разработки.
Как бы все ясно. Снизу ваши файлы с указанием количества неиспользуемого кода, а сверху сам код. Зеленым помечено нужное, а красным не используемое. Разумеется не используемое на данной странице или в данной сессии.
Выгружаем данные из «Covarage»
Следующий логичный шаг: получить только используемый код. Только где кнопка выгрузки? А она есть. Только есть в стандартном Chrome, но не в моей версии Chromium. Вот она
Только экспортирует она в виде json файла с информацией о тексте и смешениях нужного вам кода. Формат удобный поэтому напишем небольшой скрипт на Node.js что получить нужный css
Скрипт для обработки выгрузки «Covarage»
Если скрипт сохранили как coverage.js и хотим получить css из файла «css/custom.css» то выполним (Coverage.json — это файл выгрузки, а _custom.css — новый файл)
Выгрузить все используемые стили:
Чистим CSS от неиспользуемых стилей : 3 комментария
SyntaxError: Unexpected token ;
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
в строке с ошибкой должно быть два знака амперсанд &&, а в коде они заменились на HTML-версию &амп;&амп;
Найдите неиспользимый код JavaScript и CSS с панелью Coverage в Microsoft Edge DevTools
Панель Coverage в Microsoft Edge DevTools помогает найти неиспользванный код JavaScript и CSS. Удаление неиспользованого кода может ускорить загрузку страницы и сохранить мобильные данные пользователей сотовой связи.
Анализ покрытия кода
Поиск неиспользованого кода относительно прост. Но рефакторинг базы кода таким образом, что каждая страница передает только JavaScript и CSS, что она нуждается может быть трудно. В этом руководстве не сообщается, как рефакторировать базу кода, чтобы избежать неиспользованого кода, так как эти рефакторы сильно зависят от стека технологий.
Обзор
Доставка неиспользована JavaScript или CSS является распространенной проблемой в веб-разработке. Например, предположим, что на странице необходимо использовать компонент кнопки Bootstrap. Чтобы использовать компонент кнопки, необходимо добавить ссылку на таблицу стилей Bootstrap в HTML, например:
В этом таблице стилей не только содержится код компонента кнопки. Он содержит CSS для всех компонентов Bootstrap. Но вы не используете ни один из других компонентов Bootstrap. Таким образом, ваша страница скачивает кучу CSS, что она не нужна. Этот дополнительный CSS является проблемой по следующим причинам.
Откройте панель Coverage
Начните coverage печатать, выберите команду Show Coverage, а затем Enter выберите для запуска команды. Панель Coverage открывается в ящике.
Панель Coverage
Покрытие кода записи
Анализ покрытия кода
В таблице панели Coverage отображаются проанализированые ресурсы и объем кода, используемый в каждом ресурсе. Выберите строку, чтобы открыть этот ресурс в средстве Sources и просмотреть по очереди разбивку используемого кода и неиспользованого кода.
Отчет о покрытии кода
Взаимодействие с командой средств разработчика Microsoft Edge
Используйте следующие возможности, чтобы обсудить новые функции и изменения в публикации или другие вопросы, связанные со средствами разработчика.
Значок Отправить отзыв в средствах разработчика Microsoft Edge
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь и является автором Kayce Basques (Технический писатель, Chrome DevTools & Маяк).
работа лицензирована в соответствии с международной лицензией Creative Commons Attribution 4.0.
Как удалить неиспользуемый код css WordPress
Возможно, вы столкнулись с предупреждением «Удалить неиспользуемый CSS» при анализе сайта с помощью Google PageSpeed Insights.
Использование WordPress означает работу с несколькими файлами style.css и JavaScript не только из выбранной темы, но также и из плагинов. Использование темы на сайте, которая предназначена для предоставления нескольких макетов и различных элементов HTML, таких как:
Неиспользованный CSS — это код, написанный в таблицах стилей сайта. CSS подразумевает стилизацию основных элементов HTML, которые складываются и позволяют экономить время за счет улучшения эффектов в документе HTML.
Неиспользуемый CSS является одной из распространенных проблем, с которыми сталкиваются большинство веб-сайтов. Когда речь идет о производительности и времени загрузки страниц — это может замедлить работу сайта и привести к снижению производительности.
В этой статье я постараюсь помочь вам, рассказав что это за проблема и чем она отличается от других проблем оптимизации скорости, о некоторых способах поиска и удаления неиспользуемого CSS.
Как удалить неиспользуемый CSS из файлов CSS (Stylesheet)
Этот метод полезен для сайтов HTML и сайтов без динамических элементов.
Прежде чем вносить какие-либо изменения в код своего сайта, сделайте полную резервную копию. Так что вы можете восстановить свой сайт, если это необходимо.
Пошаговый процесс удаления неиспользуемого CSS:
Инструменты для поиска неиспользуемого кода CSS
Конечно, большинство разработчиков рекомендуют использовать инструменты, а не удалять неиспользуемые правила CSS по одному. И это довольно круто. Удаление неиспользованного CSS вручную может быть очень трудным и скучным, поэтому вот список некоторых рекомендуемых инструментов.
PurifyCSS
Это бесплатный инструмент, который удаляет неиспользуемый CSS из файлов HTML, JavaScript, PHP и CSS. Для работы очистителя потребуется файлы с исходным кодом HTML, а также файл с кодом CSS, который может иметь несколько экземпляров. В нашем случае основная часть нашего CSS находится в файле style.css, который поставляется с темой WordPress.
Нужно будет создать HTML файл для каждого макета страницы, который нужно обработать, в нашем случае это будет следующие страницы сайта:
Создав файлы шаблонов, соответствующие вашему сайту, перейдя непосредственно к действующим страницам шаблонов вашего сайта. Просмотрите исходный код, скопируйте и вставьте его в новые файлы, созданные заранее.
Указав какие файлы нужно сканировать, инструмент выдаст новый файл с оптимизированным CSS без изменения ваших исходных файлов. К сожалению, PurifyCSS не работает с живыми сайтами, и вы можете использовать его только во время разработки сайта.
UnCSS Online
Unused CSS online — это бесплатный онлайн-инструмент, который генерирует минимизированную версию используемого CSS.
Вам необходимо ввести свой HTML и CSS в текстовых областях, предназначенных для них, чтобы создать версию используемого CSS.
UnusedCSS
Единственное, что вам нужно сделать с UnusedCSS — это вставить в него URL вашего сайта и позволить ему делать свою работу. Он идентифицирует и удалит все неиспользуемые CSS, а также сообщит вам, сколько памяти вы сохранили. UnusedCSS бесплатна, но вы должны платить за ежемесячную подписку на скачивание очищенных CSS-файлов. Этот инструмент работает только с живыми (посещаемыми) сайтами.
PurgeCSS
PurgeCSS работает аналогично PurifyCSS, но он более сложный. Он удаляет неиспользуемый CSS с помощью сравнения строк. Одна из вещей, которые вам могут не понравиться — это то, что вы должны вручную добавлять файлы CSS, не указанные в путях, поэтому может быть довольно сложно, если ваш сайт использует некоторые плагины, такие как HTML Forms.
Например, Beaver Builder является одним из наиболее часто используемых конструкторов веб-сайтов WordPress. Но у него есть одна проблема — он накапливает много ненужных файлов CSS и JavaScript, которые сайт не использует. Этот вид CSS-файла создает дополнительные запросы к серверу и, как следствие, увеличивает время загрузки страницы. Их много, но вот список некоторых распространенных:
Beaver Builder использует обычные функции WordPress для постановки в очередь всех сценариев, поэтому вы можете использовать другие его функции для их удаления.
Вы можете поместить файл functions.php в функцию вашей темы. Последний номер будет приоритетом для функции обратного вызова, и он будет достаточно высоким, чтобы быть выше, чем другие вызовы очереди.
Используя этот хак, вы сможете удалить несколько скриптов и стилей, чтобы ваш сайт был быстрее и легче.
Удалить неиспользуемый CSS плагином WordPress
Вы можете выгружать неиспользуемые ресурсы (CSS и JS) с определенных страниц, используя плагин Asset CleanUp. Этот плагин доступен бесплатно в хранилище плагинов WordPress. И вы можете использовать Asset CleanUp для удаления неиспользуемых CSS-файлов из WordPress.
Current Version: 1.3.8.4
Last Updated: 23.09.2021
Пошаговая процедура для выгрузки неиспользованного CSS (и JS) в WordPress:
Почему неиспользуемый CSS трудно удалить?
Одна из причин удалении неиспользуемого CSS, настолько трудна, потому что извлечь неиспользуемый CSS из кода не так просто. Классы CSS реализованы на JavaScript, и их очень сложно найти.
1. Расщепление кода
Концепция разделения кода состоит в том, чтобы разбить код на отдельные пакеты и динамически загружать их только тогда, когда это необходимо.
Есть несколько способов взглянуть на разделение кода, вы можете: разделить код на основе URL-маршрутов, поэтому вам не нужно загружать код для страницы 2 на странице 1. Или вы можете разделить большой код style.css на несколько файлов и внедрить необходимые файлы на соответствующих страницах.
Разделение файлов кажется простым, но выяснить, какая страница использует какие элементы, в WordPress чрезвычайно сложно. Это потому, что все другие плагины или пользовательские элементы HTML могут использовать их.
2. CSS, который вставляется с помощью плагинов
Может быть, это лень разработчика, или, может быть, это недостаток знаний, но иногда с помощью плагинов некоторые нежелательные файлы CSS и JavaScript внедряются в страницы, которые могут не требовать их. Хорошим показательным примером является плагин Contact Form 7. Он внедряет файлы CSS и JavaScript во все страницы, содержат ли эти страницы контактную форму или нет.
3. Динамические элементы (JS Inserted CSS)
Рассмотрим сценарий, в котором JavaScript используется для запуска динамического элемента страницы, такого как поле поиска, всплывающие уведомления и т. д. В этом случае JS может содержать классы CSS и другие теги HTML, которые используются для динамических элементов.
Эти классы (внутри JS) нелегко обнаружить и, следовательно, затрудняют правильное удаление неиспользуемого CSS.
Если вы новичок или просто не разбираетесь во всех этих сложных вещах, попробуйте получить помощь или просто подумайте заранее и избегайте такого сценария. Хорошая стратегия запуска — это половина успешного сайта. Конечно, если у вас есть хороший, надежный хостинг-провайдер, гораздо проще предотвратить и решить любые возможные проблемы.
Вывод
Неиспользуемый CSS — это не конец вашего сайта — это довольно распространенная проблема, и ее также легко решить. В WordPress становится все труднее полностью удалить неиспользуемый CSS. Но вы все равно можете работать над этим, чтобы минимизировать разницу. Если вам нужна помощь, попросите кого-нибудь с большим опытом или доверьтесь тому, кто сделает это вместо вас. Удачи!
Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы
Дата публикации: 2018-12-14
От автора: не секрет, что более компактные сайты работают быстрее, чем раздутые. Не позволяйте ненужным стилям CSS тормозить ваши веб-проекты; используйте инструменты и методы, описанные ниже, чтобы уменьшить CSS и улучшить общую производительность веб-сайта.
Что такое неиспользуемый CSS?
Почему нужно удалить неиспользуемый CSS?
Поскольку CSS определяет, как отображается содержимое в HTML-документе, браузер пользователя должен загружать и анализировать все внешние файлы CSS, прежде чем он сможет начать рендеринг контента. Следовательно, чем больше CSS содержит веб-страница, тем дольше пользователи должны ждать, пока увидят что-либо на своих экранах. Встраивание небольшого CSS в HTML-файл и минимизация внешних таблиц стилей может помочь оптимизировать рендеринг контента, но сокращение неиспользуемого CSS — гораздо более эффективная стратегия для улучшения общей производительности. Объединение всех этих методов гарантирует, что пользователи будут видеть контент так быстро, как это позволит их интернет-соединение. Помимо замедления общей производительности сайта, избыточный CSS может стать причиной головной боли для разработчиков. Чистые и упорядоченные таблицы стилей легче поддерживать. Сделайте своим пользователям и себе одолжение, удалив неиспользуемый CSS.
Как удалить неиспользуемый CSS вручную
Если вы используете Chrome, на вкладке DevTools есть удобный инструмент, который позволяет видеть, какой код выполняется на странице, а какой нет. Чтобы получить доступ к этому инструменту, выполните следующие действия:
Откройте Chrome DevTools
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Откройте командное меню с помощью: cmd + shift + p
Введите «Охват» и выберите опцию «Показать охват»
Выберите файл CSS с вкладки «Охват», на вкладке «Источники» откроется файл
Любой CSS, который помечен сплошной зеленой чертой, означает, что код был выполнен. Сплошная красная черта означает, что код не выполняется. Строка кода, которая является красной и зеленой, означает, что выполняется только некоторый код в этой строке.
Просто потому, что стиль не используется на одной странице, не означает, что он не используется в другом месте, поэтому вы должны проверить несколько страниц на сайте и отследить, какие правила продолжают отображаться в списке неиспользуемых. Вы можете сделать это, скопировав и сохранив результаты каждой проверки в документе Таблиц Google. Правила, которые повторяются, вероятно, могут быть безопасно удалены.
Инструменты для удаления неиспользуемого CSS
У большинства разработчиков есть, чем заняться, кроме как удалять неиспользуемые правила CSS одно за другим. Вот почему существует множество инструментов, предназначенных для автоматизации процесса. Ниже приводится обзор самых популярных инструментов, предназначенных для того, чтобы помочь веб-разработчикам удалить неиспользуемый CSS из своих веб-проектов.
1. UnusedCSS
2. PurifyCSS
PurifyCSS — это бесплатный инструмент, который удаляет неиспользуемый CSS из HTML, PHP, JavaScript и CSS-файлов, прежде чем вы запустите сайт. Кроме того, вам нужно вручную указать, какие файлы сканировать, что делает процесс несколько утомительным. Вместо того, чтобы изменять исходные файлы, PurifyCSS выводит новый файл с оптимизированным CSS. Поскольку PurifyCSS не работает с запущенными веб-сайтами, вам необходимо использовать его на этапе разработки. Возможно, вы захотите использовать PurifyCSS во время разработки и обновления до UnusedCSS позже.
3. PurgeCSS
PurgeCSS был вдохновлен PurifyCSS, поэтому выглядит очень похожим, но он немного более оптимизирован и интуитивен в использовании. Он сравнивает контент с вашими CSS-файлами и удаляет селекторы, которые не задействуются. Единственным серьезным недостатком является то, что вы должны вручную задавать белый список CSS, что может стать головной болью, если ваш сайт использует определенные плагины, такие как HTML-формы.
4. UnCSS
UnCSS отличается от PurgeCSS тем, что рассматривает фактические веб-страницы, а не отдельные файлы, но он медленнее и требует больше ручной настройки. UnCSS является наиболее полезным при использовании с другими инструментами. Например, вы можете комбинировать UnCSS с Grunt и Node.js для автоматизации удаления неиспользуемых CSS.
Альтернативные методы удаления CSS
Многие инструменты веб-аудита предлагают оптимизацию CSS как часть процесса. Также постоянно появляются новые инструменты для удаления неиспользуемого CSS, поэтому не бойтесь экспериментировать. Более старые версии Opera и Firefox поддерживают надстройку под названием Dust Me, которая обнаруживает неиспользуемый CSS, но с 2015 года она не поддерживается. К счастью, Mozilla в настоящее время работает над новым инструментом под названием CSS Coverage, который поможет разработчикам оптимизировать свой CSS.
Предостережения относительно удаления неиспользуемого CSS
Инструменты, рассматриваемые в этом руководстве, не идеальны. Существует несколько различных методов определения незадействованных селекторов CSS; однако сопоставление селекторов с элементами в DOM может быть сложным, если у вас есть элементы, зависящие от API и сторонних скриптов. Если вы хотите попробовать удалить неиспользуемый CSS вручную, то вам нужно быть более осторожным, чтобы вы случайно не сломали приложение, удалив что-то важное. Тем не менее, вы должны знать свой сайт лучше, чем кто-либо другой, а функция аудита DevTools может предоставить некоторую ценную информацию, которая поможет вам создать более лаконичный CSS с самого начала.
Как автоматизировать удаление неиспользуемых CSS с помощью UnCSS
Теперь давайте рассмотрим, как мы можем использовать один из перечисленных выше инструментов, чтобы очистить таблицы стилей. В этом руководстве Дина Хьюма, объясняется, как настроить Node.js, Grunt, UnCSS и еще один плагин под названием CSSmin на машине под Windows, чтобы автоматически удалять неиспользованный CSS.
1. Установите Node.js
Загрузите последнюю версию с сайта Node.js и следуйте инструкциям по установке.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как вы избавляетесь от неиспользуемого CSS-кода? Часть 2
Сегодня публикуем вторую часть перевода материала о борьбе с неиспользуемым CSS-кодом.
Постпроцессинг CSS
Предположим, в некоем проекте CSS пишут с использованием Less или Sass, а затем, для компиляции имеющегося кода в обычный CSS, применяют постпроцессор. В таком проекте, вероятно, имеется автоматическая система избавления от неиспользуемого CSS, которая запускается после выполнения препроцессинга CSS. Выглядеть подобное может так:
PurgeCSS
PurgeCSS — это ещё один проект, который направлен на борьбу с неиспользуемым CSS. Хотя это и не относится напрямую к возможностям этого проекта, но он мне нравится тем, что в его документации чётко разъяснены его отличия от конкурентов. Выше мы уже приводили фрагмент сравнения PurgeCSS и PurifyCSS. А вот — ещё одно извлечение из документации PurgeCSS, посвящённое PurifyCSS. Речь идёт о том, что главная проблема PurifyCSS заключается в низком уровне модульности этого проекта. Однако в этом кроется и основная сильная черта PurifyCSS. Как уже было сказано, PurifyCSS считает CSS-селекторами все слова, находимые им в файлах. Такой подход чреват ошибками. Но PurifyCSS решает эту проблему, давая возможность создавать функции-экстракторы. Такая функция принимает содержимое файла и извлекает из него список используемых в нём CSS-селекторов. Это позволяет очень хорошо решить задачу избавления от неиспользуемого CSS-кода.
Сейчас проект PurgeCSS выглядит крупным игроком рынка средств для очистки CSS-кода. Многие им пользуются, многие пишут о нём.
Я так думаю, что суть этого сводится к следующему: Tailwind создаёт большой CSS-файл, полный вспомогательных селекторов. Но не предполагается, что в проекте будут использованы все эти селекторы. Разработчик применяет их для решения всех задач по стилизации своего HTML-кода, а затем PurgeCSS анализирует этот HTML-код и убирает ненужные селекторы, формируя готовый к продакшну CSS.
Правда, до PurgeCSS ещё нужно донести сведения о каждом HTML и JavaScript-файле, используемом на сайте. Другими словами — нужно самостоятельно настроить всё, что имеет отношение к внешним ресурсам, и учитывать то, что данные, поступающие в проект из неких хранилищ, вероятно, не смогут быть проанализированы в ходе сборки проекта. В результате использование PurgeCSS при сборке проектов предполагает немалый объём ручной работы.
Мой любимый подход к избавлению от неиспользуемого CSS
Мне больше всего нравится следующий подход к удалению ненужного CSS. Он заключается в том, чтобы в команде разработчиков проекта был бы кто-то, кто очень хорошо знаком с CSS-кодом этого проекта. Этот человек должен быть в курсе текущих проблем со стилями и должен постепенно их решать. Возможно, это устаревший взгляд на ситуацию, принадлежащий человеку, которому стоило бы идти в ногу со временем. Но мне это, в любом случае, кажется наиболее практичным подходом. Учитывая то, что рассматриваемую нами задачу так тяжело решить, я думаю, что ответом на тот вызов, который бросает эта задача разработчикам, может стать тяжёлый труд. Ответ — это понимание проблемы и её постепенное решение. Решить эту задачу может фронтенд-разработчик, который близко знаком с проектом и знает о том, что в нём используется, а что — нет.
Но, возможно, мой любимый инструмент в наборе средств исследователя неиспользуемого CSS это тот, о котором речь пойдёт в следующем разделе.
Исследование проектов методом визуальной регрессии
Этот метод заключается в том, что разработчик делает как можно больше скриншотов сайта. Делаются копии экранов самых важных страниц, и тех страниц, вид которых зависит от состояния приложения. Скриншоты делаются в разных браузерах, при разных размерах экрана. Эти скриншоты создаются на основе материалов ветки master репозитория проекта.
Собственно говоря, вот видео, в котором это показано.
Надо отметить, что на тему инструментов для исследования визуальной регрессии сказано уже очень много всего, но именно автор этого видео — это единственный человек, который разъяснил всё предельно доходчиво. Нужно не просто делать скриншоты; нужно их сравнивать и искать различия между ними. Нужно не просто находить различия; нужно их принимать или отклонять. Кроме того, надо, чтобы принятие или одобрение изменений влияло бы на процесс слияния веток в репозиториях. Кроме того, у разработчика должна быть возможность настройки браузера перед снятием копии экрана и возможность автоматизации работы со сделанными скриншотами.
Atomic CSS и CSS-in-JS
Я уверен в том, что многие из читателей этого материала могут сказать: «У меня нет неиспользуемого CSS, так как применяемые мной инструменты генерируют в точности тот код, который мне нужен, и ничего больше».
Если так — то это просто замечательно.
Возможно, речь идёт об Atomizer. Возможно — это инструмент Tachyons, результаты работы которого пропускают через UnCSS и соблюдают при этом повышенную осторожность. Может — это комбинация Tailwind + PurgeCSS, которая сейчас у всех на слуху.
Может — со стилями работают ещё как-нибудь. Если некто тесно связывает JavaScript-компоненты и стили, скажем, как при использовании React и Emotion, или даже просто применяет CSS-модули с чем бы то ни было, среди преимуществ таких вот СSS-in-JS-подходов можно отметить уменьшение объёма неиспользуемого CSS в готовых проектах. Кроме того, так как при сборке многих проектов, основанных на JavaScript, применяются реализации алгоритма tree-shaking и техники разделения кода, в таких проектах не только будет меньше ненужного CSS. В ходе их работы загружаться будет только то, что нужно в каждой конкретной ситуации. Но, конечно, недостатки есть и у подобных подходов к работе с CSS.
Итоги
Давайте теперь подумаем о том, как избежать появления ненужного CSS-кода в наших будущих проектах. Я полагаю, что будущее стилизации — это разделение между глобальными стилями, и стилями, применяемыми к отдельным компонентам. Большинство стилей ограничено рамками компонентов, но есть и глобальные стили, благодаря использованию которых можно задействовать каскадную природу CSS. Например — это может быть нечто вроде глобальных стандартных настроек типографического характера.
Если большинство стилей ограничено рамками компонентов, то я думаю, что у ненужных стилей меньше шансов проникнуть в готовые проекты, так как разработчику несложно вникнуть во взаимоотношения небольших и тесно связанных фрагментов HTML и CSS. А когда компонент убирают из проекта или развивают, стилизация покидает проект или развивается вместе с ним. В результате CSS-сборки создаются на основе реально используемых в проекте компонентов.
Технологии CSS-in-JS совершенно естественным образом двигаются в этом направлении. При применении таких технологий стили привязаны к компонентам. А это в данном случае самое главное. Но привязка стилей к компонентам — это необязательно. Мне нравится универсальный подход, подразумевающий использование CSS-модулей. Он практически полностью нацелен на разделение областей действия стилей и не заставляет разработчика пользоваться каким-то конкретным JavaScript-фреймворком.
Может быть, всё вышесказанное кажется вам чем-то теоретическим или далёким от реальных нужд веб-разработчиков. У вас просто есть сайт, на котором используется Bootstrap, и вам хотелось бы уменьшить размер CSS, который загружается пользователями этого сайта. Если так — я посоветовал бы вам пользоваться исходным кодом Bootstrap, а не его стандартной сборкой. Этот исходный код написан с использованием SCSS и состоит из множества подключаемых модулей. А это значит, что если вам некоторые части Bootstrap не нужны — соответствующие модули можно просто отключить.
Удаление модулей dropdowns, badges и breadcrumbs из Bootstrap перед сборкой проекта
Желаю всем удачи в нелёгкой борьбе с ненужным CSS-кодом.
Уважаемые читатели! Как вы боретесь с неиспользуемым CSS-кодом, который попадает в продакшн?