Стоит ли удалять неиспользуемый CSS?

Question

Я работаю над простым веб-приложением с двумя другими разработчиками в колледже.Мы используем несколько библиотек и пакетов.Сейчас я пытаюсь подготовить наше приложение к развертыванию, но есть уведомления, что оно довольно медленное.Есть много неиспользуемых правил CSS.

Я попытался вручную просмотреть скомпилированные стили, найти ссылки и удалить их.Но это действительно утомительно.

Мой вопрос:

• Стоит ли удалять неиспользуемые правила CSS или результат будет незначительным?
• Как лучшеспособ пойти об этом?

Answer 1

Стоит ли удалять неиспользуемые правила CSS?

Я бы сказал, да.Наличие какого-либо неиспользуемого кода в вашей производственной сборке нехорошо.

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

Возможно, вам следует выяснить, что замедляет работу вашей страницы.Посмотрите на вкладку сети ваших инструментов разработчика, чтобы начать отладку, почему загрузка страницы медленная, Google Page Load Insights также может помочь.Посмотрите эту серию блогов , посвященную также ускорению работы ваших веб-приложений.

Если вы еще этого не сделали, вам, вероятно, следует минимизировать и связать ваши CSS и JS для производства.

---

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

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

1.Удалите вручную неиспользуемый CSS.

Если ваше приложение все еще довольно маленькое, возможно, это будет самый простой подход.

1. Откройте Chrome DevTools
2. Откройтекомандное меню с: cmd + shift + p
3. Введите «Покрытие» и нажмите на опцию «Показать покрытие»
4. Выберите файл CSS на вкладке Покрытие, которое откроет файл ввкладка Источники

Источник: Google Developer, Chrome 59

2.Используйте онлайн-инструмент

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

• Лучшим из доступных инструментов, вероятно, является UnusedCSS , однако он позволяет вам сделать только один сайт бесплатно.
• UnCSS это совершенно бесплатно, но не настолько полно.
• PureifyCSS также хорош и бесплатен.

3.Автоматизировать удаление CSS

uncss позволяет автоматизировать удаление неиспользуемого CSS как во время сборки, так и во время компиляции.Он также работает с Grunt и Babel.

---

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

Редактировать:

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

См. также: https://css -tricks.com / unused /

Answer 2

• Очевидно, что больше css будет загружать ваше приложение медленно.Чтобы сделать ваше приложение более быстрым с тем же Css, вы можете минимизировать ваш css онлайн и сделать его одной строкой css.Это уменьшит размер вашего css-файла.
• Вы также можете сделать это для JS

• Кроме того, уменьшите размер изображения и загружайте его из кэша каждый раз

  Чтобы минимизироватьваш css или JS перейдите на https://www.minifier.org/