Реализуем Critical Path CSS в project-stub

Форум /

Как то давно, мной был задан вопрос https://ru.bem.info/forum/793/ по реализации разделения css стилей и последующего их инлайна на html страницу.

Подход довольно простой.

Собираем два разных бандла, первый critical, второй со всеми стилями.
Превращаем файл critical.css в js файл, через инлайн файла module.exports = '....'
Подключаем этот файл обычным require в виде элемента блока page {elem: 'css', content: require('desktop.bundles/critical/critical.css.js')}

В critical бандле подключается только один единственный блок critical (простите за каламбур) у которого в зависимостях описаны все блоки которые нужно заинлайнить.

Выложил выжимку своего конфига на enb https://gist.github.com/JiLiZART/efa6b23c478b17c4708b931a44fce996

Я использую bemtree, но для bemjson будет даже проще.

Есть у этого способа и недостатки, стили, которые инлайнятся в страницу, дублируются в бандле со всеми остальными стилями. Для решения этой проблемы я навоял вычитание deps'ов друг из друга в этом PR https://github.com/enb/enb-bem-techs/pull/190 Что поможет в дальнейшем вычитать все блоки critical бандла из основного

9 years ago

tadatuta

Небольшая поправка по тексту. Вычитание есть давным-давно, в твоем PR речь про пересечение.

И, как верно заметили в обсуждении, эта задача теперь решаема через https://github.com/bem-sdk/bem-decl/blob/master/lib/intersect.js

Еще не очень понятно, зачем дополнительная технология, оборачивающая CSS в JS-модуль, если можно {elem: 'css', content: fs.readFileSync('desktop.bundles/critical/critical.css', 'utf8')}.

Чтобы оставлять комментарии, необходимо авторизоваться.