Извлечь использованный CSS со страницы

Мне нужно извлечь использованный CSS из файла CSS на 19 000 строк, где 98,4% не используются (ой). Я знаю, что вы можете использовать инструменты разработчика Chrome для просмотра покрытия CSS, например:

введите описание изображения здесь

Но это не позволяет вам даже перейти к зеленым линиям. Вручную пройти через 19 тысяч строк просто не представляется возможным.

Chrome Lighthouse, похоже, не дает вам возможности видеть только те правила, которые вам нужны, как раньше Инструменты разработчика.

Я попробовал надстройку «Использование CSS» для Firefox (которую рекомендуют многие сайты), но для нее требуется FireBug, который сам по себе несовместим с текущей версией FireFox.

Может ли кто-нибудь придумать способ вытащить только CSS, который каким-то образом используется?


html css lighthouse
person Chuck Le Butt    schedule 20.10.2017    source источник
comment
вы уже просмотрели github.com/purifycss/purifycss?   -  person sn_92    schedule 20.10.2017
comment
но для этого требуется FireBug, который сам по себе не совместим с текущей версией FireFox - очень жаль, что все старые версии Firefox были полностью стерты из сети, если даже не из памяти человечества... черт возьми , если бы существовало что-то вроде ftp.mozilla.org/pub/firefox/releases .   -  person CBroe    schedule 20.10.2017
comment
Я задал тот же вопрос - › stackoverflow.com/questions/44633247/ :) надеюсь, вам повезет больше!   -  person Morpheus    schedule 20.10.2017
comment
В итоге я сделал это вручную. На все ушло минут 20. Иногда выполнение действий вручную может быть быстрее, чем вы ожидаете. Однако я буду иметь в виду эти ответы.   -  person Chuck Le Butt    schedule 20.10.2017
comment
Из Chrome v73 вы можете экспортировать .json файл покрытия developers.google. com/web/updates/2019/01/devtools#coverage Теперь вопрос в том, как разобрать это, чтобы извлечь строки CSS   -  person Gianfranco P.    schedule 25.03.2019

Ответы (3)


arrow_upward
5
arrow_downward

Надеюсь, что это поможет вам

https://uncss-online.com/

просто добавьте html слева и css справа. Нажмите ОК, затем увидите волшебство.

если в css есть какая-либо ошибка, он попросит вас удалить эту ошибку в этом номере строки.

Это самый простой метод :)

person sunil kumar    schedule 20.10.2017
comment
Это вытащило некоторые странные вещи, но также и некоторые хорошие вещи. Определенно улучшение, если вы застряли. - person Chuck Le Butt; 20.10.2017

arrow_upward
4
arrow_downward

Я использую PurifyCSS для некоторых своих проектов. Помогает мне сохранить легкость моего CSS.

Не знаю о структуре вашего проекта и рабочем процессе, но существует множество руководств:

https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726

https://survivejs.com/webpack/styling/eliminating-unused-css/< /а>

Есть также несколько онлайн-решений для избавления от неиспользуемого CSS, но никогда не пробовал:

https://uncss-online.com/

person Daniel Sixl    schedule 20.10.2017
comment
Совет: всегда предпочтительнее на самом деле объяснять, чем просто размещать внешние ссылки, так как эти ссылки исчезнут раньше, чем вы думаете! - person Chuck Le Butt; 20.10.2017
comment
Имеет смысл. Я буду иметь это в виду. Спасибо, Чак. - person Daniel Sixl; 20.10.2017

arrow_upward
3
arrow_downward

После загрузки покрытия .json из Chrome (>= v73) [Что нового в DevTools — Chrome 73].

Вы можете извлечь CSS с помощью этого скрипта узла:

node extractCSS.js ~/Desktop/Coverage-20190325T110812.json
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://d33wubrfki0l68.cloudfront.net/css/1bd6a34e1fcf409d29d1a960e6299893fca2e7b1/css/all.css
https://unpkg.com/[email protected]/dist/css/bootstrap.min.css
./final_css.css file saved

# extractCSS.js
const fs = require('fs');

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

const filename = process.argv[2]
const output = './final_css.css'

if(!filename) {
  console.error('Missing filename to get coverage information from');
  process.exit();
}

const file_coverage = fs.readFileSync(filename);

const css_coverage = JSON.parse(file_coverage);

for (const entry of css_coverage) {
  if (!entry.url.endsWith('.css')) continue;
  console.log(entry.url)
  final_css_bytes += '# ' + entry.url + '\n\n'
  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }
  final_css_bytes += '\n\n'
}

fs.writeFile(output, final_css_bytes, error => {
  if (error) {
    console.log('Error creating file:', error);
    return
  }
  console.log(output, 'file saved');
});

https://gist.github.com/gianpaj/a2f99e022e2c3f8abb9deecb47d572c4

На основе: https://blog.fullstacktraining.com/remove-unused-css-javascript-code-from-your-project/

person Gianfranco P.    schedule 25.03.2019