Джефф Кросс - соучредитель nrwl.io. Ранее он был техническим руководителем группы Angular Mobile в Google.
Сегодня мы выпускаем и открываем исходный код нового подключаемого модуля webpack, webpack-plugin-critical. Этот плагин представляет собой тонкую оболочку критической библиотеки Адди Османи.
Важная библиотека может обеспечить значительное сокращение времени, необходимого для визуализации начальной html-страницы, когда пользователи открывают ваше приложение. Это достигается путем анализа содержимого страницы и анализа связанных таблиц стилей для экстраполяции правил CSS, которые фактически используются в разметке. Затем Critical может встроить соответствующий CSS в HTML-документ и предварительно загрузить остальную часть таблицы стилей в фоновом режиме. Этот метод особенно эффективен для одностраничных приложений (а не только для приложений Angular!), Где большая часть стилей приложения инкапсулирована в компоненты, которые будут загружены позже, или при рендеринге оболочки приложения, где отображается небольшое подмножество пользовательского интерфейса приложения. до того, как остальная часть приложения загрузится.
Этот метод также может сократить начальное время рисования для полностью предварительно обработанных страниц с некоторыми оговорками. А именно, время для определения правильных правил CSS для встраивания может занять несколько секунд, поэтому он не подходит для предварительного рендеринга во время запроса и может значительно увеличить время сборки, если предварительный рендеринг многих страниц во время сборки. По этой причине этот плагин наиболее применим к страницам, которые используют стратегию App Shell или динамически отображаются в браузере во время выполнения.
Предварительная версия плагина webpack уже несколько месяцев используется в производственной среде на сайте code.gov. Локальное тестирование с моделированием подключения к сети 3G показало сокращение времени до первой отрисовки с 1600 мс до 230 мс (примечание: моделирование локальной сети может дать хорошие результаты для сравнения, но, как правило, неточно отражает реальную задержку и пропускную способность сети).
Чтобы использовать плагин, установите пакет от npm:
$ npm install webpack-plugin-critical
Обратитесь к репозиторию github плагина за документацией по использованию и примерами. Запросы на вытягивание и проблемы приветствуются!
И смотрите критическое репо для получения более подробной информации об использовании и предыстории.
Напишите нам в Твиттере на Nrwl.io, чтобы сообщить нам, если у вас есть вопросы или вы хотите рассказать, как вы его используете!
Джефф Кросс - соучредитель Nrwl - Enterprise Angular Consulting.
