Подтвердить что ты не робот

Оптимизация. Есть ли способ найти и удалить неиспользуемые CSS и Javascript, общие для всех html-страниц?

На моем веб-сайте много веб-страниц, и я пытаюсь очистить стили и скрипты. Около 10% или более из каждого js/css не используются ни одной из html-страниц на моем веб-сайте. Мне нужно удалить общие неиспользуемые и избыточные css и js. Я немного поработал и нашел этот. Но это не бесплатно.
ПРИМЕЧАНИЕ.

  • Некоторые из js/css вызываются более чем одной html-страницей, и все же есть часть каждого js/css, которая не используется ни одной из html-страниц, которые их вызывают.
  • Мой сайт совместим только с Chrome.
4b9b3361

ОТВЕТЫ

Ответ 1

Да, вы должны использовать Addy Osmani grunt-uncss plugin для очистки неиспользуемого CSS. Я не уверен, можно ли использовать инструмент для удаления неиспользуемого JS, поскольку он зависит от логики приложения, какая часть кода JS будет вызвана.

Ответ 2

Откройте chrome DevTools, в разделе Аудит вы можете проверить текущее состояние или перезагрузить страницу и выполнить аудит при загрузке

Затем в разделе Производительность веб-страницы есть раздел, в котором говорится: "Удалить неиспользуемые правила CSS

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

Кстати, если это не отображается, насколько я знаю, он работает в хром канареечной. Также я не помню, включил ли я флаг для этого. (Я так не думаю)

Ответ 3

Прежде всего, есть полные решения, некоторые из которых, вероятно, уже упоминаются на SO, но я не знаком ни с одним из них, и многие из них, вероятно, будут стоить денег. Если бы я был вами, я бы начал искать с помощью ключевых слов "очистить css lint" и "очистить javascript lint" или что-то подобное. Я бы не пошел и не написал свой собственный код для этой цели.

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

  • Извлеките все ссылочные таблицы стилей из каждого, создав список
  • Извлеките имена всех классов CSS и идентификаторов из каждого, создав список
  • Сопоставьте список с классами и идентификаторами, фактически используемыми в HTML
  • Составьте список всех тех, которые не являются, и сохраните его в файле для легкого доступа.

Вы можете выбросить что-то подобное на Python, возможно, через несколько часов, если вы знакомы с ним. Конечно, это зависит от того, какой язык вы используете для быстрого и грязного сценария.

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

Ответ 4

Вы можете использовать GTmetrix для очистки CSS-кода в http://gtmetrix.com/remove-unused-css.html. Дайте URL-адрес и нажмите GO!

http://www.peterbe.com/plog/mincss - это инструмент, который при задании URL (или нескольких URL-адресов) загружает эту страницу и весь ее CSS и сравнивает каждый селектор в CSS и выясняет, какие из них не используются. Результатом является копия исходного CSS, но с селекторами, которые не найдены в документе (-ах), удалены.

вы также можете использовать инструмент проверки google chrome на этом веб-сайте http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

или вы можете использовать расширения google chrome

Ответ 5

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

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