Подскажите есть какой-нибудь инструмент для такой задачи:
Есть 2 файла CSS, один - main.css содержит все стили страницы. Другой - critical.css. Там стили для быстрой загрузки первого экрана страницы. Так вот main.css уже содержит стили, которые есть в critical.css и т.е. при загрузке main.css они грузятся повторно. Чтобы сократить размер main.css логично было бы удалить из него стили которые уже есть.
Как это сделать? Само собой вариант "вручную" не подходит.
Kovalsky, в каком месте extract решает задачу? он просто формирует критичный css и все. А задача не сформировать критичный css, а создать из main.css файл, в котором не будет правил, которые есть в критичном css. Впрочем возможно я не так им пользуюсь. Дайте пожалуйста строчку для консоли, которая по вашему решает вопрос.
Андрей Федоров, "в каком месте extract решает задачу? он просто формирует критичный css и все"
- по этому сообщению я вижу что вы либо не читаете что вам пишут, либо по каким-то другим причинам информация пролетает мимо вас. Extract не имеет прямого отношения к формированию critical css.
Extract - remove the inlined styles from any stylesheets referenced in the HTML. It generates new references based on extracted content so it's safe to use for multiple HTML files referencing the same stylesheet. Use with caution. Removing the critical CSS per page results in a unique async loaded CSS file for every page. Meaning you can't rely on cache across multiple pages
То есть оно удаляет найденные стили из первичных таблиц (обязательно прочитайте топик на гитхабе если будете пользоваться extract). Это разве не то что вам нужно? Оно конечно может довольно специфично работать, но думаю всегда есть альтернатива в других плагинах. К тому же гляньте на топик на SO, он может вам помочь.
Kovalsky, я не большой спец в английском, но мне кажется тут описана другая логика работы:
critical extract берет в html-файл, смотрит какие css файлы к нему подключены, формирует на их основе критичный css, вставляет его инлайн, и формирует код, который подключенные css файлы загружает асинхронно.
Из самих изначально подключенных css файлов critical extract никакие правила не удаляет.
Андрей Федоров, читайте топик на гитхабе, там разжёвано всё. В том числе там написано, что если вам не нужно инлайнить, то можете юзать cave который и удалит все критичные стили из основной таблицы (файла).
"Из самих изначально подключенных css файлов critical extract никакие правила не удаляет" - заявлено что удаляет: "remove the inlined styles from any stylesheets referenced in the HTML", а всё остальное вы вроде бы правильно поняли
Kovalsky, ну так в топике ничего не объясняется. Просто у человека та же проблема. И cave у меня не работает, даже установится не может. Может потому что проект заброшен 5 лет назад... В общем тупик.
Возможно я не смог донести суть вопроса...
main.css содержит:
a{}
b{]
При загрузке на первой странице есть только блоки b. А блоки а находяться внизу страницы, до них надо скролить.
После формирования критического css получаем в critical.css: b{}
Теперь нужен инструмент, который сравнит main.css и critical.css и сформирует результирующий файл, в котором есть все правила из main.css, за исключением тех, что есть в cricital.css, т.е.: a{}
Бегло ознакомился. Там говориться об инструментах удаляющих неиспользуемый css. Но у меня весь css используется. Просто правила дублируются в двух файлах. Мне нужно такой инструмент, который сравнит 2 файла и из большого удалит те правила, что уже есть в меньшем.
Андрей Федоров, на скрине я вижу что: 1) у вас нету package.json, 2) установлен cave@2.0.0, 3) 18 пакетов чего-то там требуют, 4) найдено 3 уязвимости. Ни один из этих пунктов не требует какого-то особого к себе внимания; пакет успешно установлен, его можно использовать.
Проект действительно заброшен довольно давно, но вероятно это произошло потому что он работает именно так как планировал создатель или может быть у него нет никакого желания продолжать работу над ним. В любом случае, я только что проверил пакет, всё работает: скопировал папку test, выполнил - работает; даже погонял со своими стилями, всё равно всё работает. Не знаю насколько пакет подготовлен для работы со сборщиками, это надо смотреть применительно к каждому конкретному инструменту. Также cave можно выполнять через консоль. Кажется gulp вполне способен использовать в pipe любой объект реализующий какие-то там не очень сложные требования API.
Думаю можно вместо cave использовать cssnano, там есть опции по удалению дублирующих правил.
Kovalsky, ну не разработчик я, уж извините. я только сегодня node.js увидел, и то только потому что стали рекомендовать инструменты, которые без ноды не работают. Опять же тот же critical молча установился и запускается. Поэтому я решил, что с cave что-то не так.
Средний
