Чистим CSS от неиспользуемых стилей

Проблема с очисткой css может возникнуть в 2 случаях:

  1. Ваша свалка css достигла критического размера и надо удалить лишние стили
  2. Вы наконец решили воспользоватся рекомендациями PageSpeed Google «Отложите загрузку неиспользуемого контента CSS«. А значит надо разбить код на рабочий и на легаси.

Запускаем «Covarage» в Chrome

Как и рекомендует Google воспользуемся закладкой «Coverage» в инструментах разработки.

  • Переходим в режим разработки (F12)
  • Нажимаем троеточие и выбираем «Covarage»
Закладка "Coverage" в Google Chrome
Закладка «Coverage» в Google Chrome

Как бы все ясно. Снизу ваши файлы с указанием количества неиспользуемого кода, а сверху сам код. Зеленым помечено нужное, а красным не используемое. Разумеется не используемое на данной странице или в данной сессии.

Выгружаем данные из «Covarage»

Следующий логичный шаг: получить только используемый код. Только где кнопка выгрузки? А она есть. Только есть в стандартном Chrome, а но не в моей версии Chromium. Вот она

Кнопка "Export" в "Coverage"

Только экспортирует она в виде json файла с информацией о тексте и смешениях нужного вам кода. Формат удобный поэтому напишем небольшой скрипт на Node.js что получить нужный css

Скрипт для обработки выгрузки «Covarage»

var fs = require("fs");
var url = require('url');

var fileName = process.argv[2];
var filter = process.argv[3];

if (!fs.existsSync(fileName)) {
    console.log('not found file: ', fileName);
    return;
}

var content = JSON.parse(fs.readFileSync(fileName, 'utf8'));

for (var i = 0, len = content.length; i < len; i++) {

    var row = content[i];
    var ext = url.parse(row.url).pathname.split('.').pop();

    if (ext !== 'css') {
        continue;
    }

    if (filter &amp;&amp; row.url.indexOf(filter) !== -1) {
        showUseCSS(row);
        break;
    }

    if (!filter) {
        showUseCSS(row);
    }
}

function showUseCSS(row) {
    for (var i = 0, len = row.ranges.length; i < len; i++) {
        var offset = row.ranges[i];
        console.log(row.text.substr(offset.start, offset.end - offset.start) + "\n");
    }
}

Если скрипт сохранили как coverage.js и хотим получить css из файла «css/custom.css» то выполним (Coverage.json — это файл выгрузки, а _custom.css — новый файл)

node coverage.js Coverage.json css/custom.css > _custom.css

Выгрузить все используемые стили:

node coverage.js Coverage.json > _style.css

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *