Вам не нужно хранить бесполезные правила CSS

В дополнение к неиспользуемому коду, создаваемому вездесущими фреймворками, мертвый код накапливается по мере разработки веб-страницы. Хранение бесполезных байтов — это не только пустая трата электроэнергии. Это задерживает рендеринг страницы, потому что неиспользуемому коду требуется некоторое время для загрузки и анализа.

Удаление неиспользуемого кода JavaScript может быть слишком сложным, чтобы оправдать такое улучшение, или невозможным, если используются фреймворки и библиотеки.

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

Как быстро обнаружить неиспользуемый код JavaScript и CSS описано командой Google https://developers.google.com/web/tools/chrome-devtools/coverage. Но там не объясняется, что делать дальше. Ниже я объясню, как можно использовать результаты анализа покрытия.

Давайте оптимизируем веб-страницу, опираясь на библиотеку Bootstrap. Я взял пример с https://getbootstrap.com/docs/5.0/forms/overview/. Я не повторяю здесь его код, вместо этого мой полный код можно скачать с https://github.com/marianc000/coverage.

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

Обратите внимание: если бы моя веб-страница была более сложной, мне пришлось бы нажимать все кнопки, чтобы активировать все возможные представления во время записи использования кода.

Как удалить ненужные 150 КБ из оригинальной таблицы стилей Bootstrap?

Chrome DevTools предлагает возможность сохранять координаты используемого кода. На вкладке покрытия нажмите значок Экспорт (значок со стрелкой между значком Очистить и текстовым полем URL-фильтр) и сохраните сгенерированные данные об использовании кода.

Данные сохраняются в формате JSON. Файл содержит массив объектов, описывающих все исходные файлы HTML, CSS и JavaScript, составляющие веб-страницу. Чтобы продемонстрировать структуру JSON, моя страница содержит крошечный файл сценария.

Каждый объект имеет три свойства:

  • url — URL-адрес исходного файла.
  • ranges — массив координат используемого кода
  • text — все содержимое исходного файла

Чтобы создать новый файл без неиспользуемого кода CSS, необходимо найти объект, описывающий bootstrap.min.css. Его свойство url соответствует URL-адресу bootstrap.min.css. Затем значимые фрагменты его свойства text могут быть извлечены с использованием координат из его массива ranges.

Поскольку файл покрытия имеет формат JSON, самый простой способ изолировать используемый код — это JavaScript. Node.js, среда выполнения JavaScript, позволяет легко загружать файл JSON и сохранять новый файл CSS.

В папке с сохраненным JSON создайте файл index.js с:

const fs = require('fs')
const coverage = require('./bootstrapcoverage.json');
const {ranges,text} = coverage.find(o => o.url.endsWith('bootstrap.min.css')) ;
let newCss =  ranges.reduce((total, range) => total +  text.substring(range.start, range.end), '');
fs.writeFileSync('new.css', newCss);

Код загружает JSON, находит объект, описывающий использование кода, в CSS-файле Bootstrap, объединяет полезные фрагменты и сохраняет их в файле new.css.

Чтобы выполнить index.js, откройте папку с двумя файлами в командной строке (или, например, в терминале Visual Studio Code) и введите: node index.js

Замена огромной таблицы стилей <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel=”stylesheet”> на <link href=”new.css” rel=”stylesheet”> не меняет внешний вид моей пробной страницы, но значительно уменьшает ее размер.

Пример кода можно загрузить с https://github.com/marianc000/coverage.