Ср. Дек 1st, 2021

Супероптимизированные статические веб-сайты

От создателя: если вы используете страницы GitHub, высока возможность, что вы также используете Jekyll. Самая наилучшая вещь, которую предлагает Jekyll — это создание шаблонов, которые отлично подходят как для скорости разработки, так и для обеспечения единообразия вашего веб-сайта.

Jekyll больше 12 лет, и местами его возраст дает о для себя знать. Я хотел увидеть, что может быть с сегодняшними, более современными инструментами.

Цепочка инструментов активно используется react-dom/server и использует сильную систему настраиваемых компонентов, которая обрабатывает ресурсы веб-сайта. Хотя я не первый, кто сделал статическую систему сайта на основе React, система пользовательских компонент — это то, что отличает ее и дает возможность:

создавать шаблоны на базе React;

не включает React в клиенте (либо любой JS, если вы этого не желаете);

легкое сжатие / минимизация изображений, CSS и JS;

обычное долгосрочное кеширование активов;

детализированный контроль использования ресурсов, включая встраивание критически принципиальных CSS и JS;

доступна наилучшая оптимизация CSS — я не встречал ничего подобного.

Сложив все это вкупе, общий вес страницы, на которой вы на данный момент находитесь, составляет менее 100 КБ, включая шрифт 50 КБ. Во-1-х, шаблоны на основе React. По сущности, это то же самое, что и MDX. Вы сможете включить HTML и JSX в маркдаун:

Он запускается на сервере во время сборки и возвращает обыденный HTML-код, поэтому для результирующего файла не требуется JS для пуска или сервер для предварительной обработки перед отправкой клиенту.

Компонентная система

Система маркдауна не нова, но она позволяет использовать интегрированные компоненты. Они функционируют (в основном) как заменяющие элементы для стандартных компонент HTML. Например, для рендеринга изображения это так же просто, как:

Но с другой стороны это загружает изображение, сжимает его, конвертирует в несколько форматов (webp и т.д.) И возвращает элемент picture.

Вы заметите, что возвращенные src — это хэши. Все, что находится в папке /res, можно неопасно установить с помощью неопределенной политики кеширования, поэтому что, если файл изменится, его имя тоже поменяется.

Здесь, также есть еще несколько особенностей. Вы сможете установить на изображение атрибуты width и height, чтоб избежать изменения макета. Это так же просто, как:

(Тут мы стараемся поддерживать как можно огромную совместимость с исходными элементами HTML)

А если вы понимаете, что ваше изображение, вероятно, слишком велико, и вы желаете изменить его размер до 1000 пикселей в ширину?

Так как компоненты являются стандартными компонентами React, вы не ограничены их внедрением только в своей разметке. Вы также сможете использовать их в своих собственных компонентах React либо макетах страниц.

JavaScript

Когда вы делаете собственный собственный макет страницы для вас будут полезны последующие компоненты:

<InlineCss> и <ExternalCss> — рендеры <style> и элементы <link> соответственно

<InlineJs> и <ExternalJs> — оба элемента рендеринга <script>

JavaScript

Как и следовало ждать, переданные вами CSS и JS оптимизированы с помощью csso и terser соответственно. И, как и изображения, файлы, сделанные из <ExternalCss> и <ExternalJs> нареченные с использованием выходного хеша, поэтому имеют возможность кэшироваться на неопределенный срок.

Эти составляющие позволяют очень просто решить, какие ресурсы вы загружаете на страничку и как они загружаются.

Для сотворения CSS это всего лишь простой CSS. Нет модулей CSS-in-JS либо CSS. Основное внимание здесь уделялось созданию лучшего доступного CSS-вывода.
Например, откройте веб-инспектор в этом кодовом блоке и поглядите выделенное ниже.

Вы также сможете посмотреть где угодно на сайте. Имена классов недлинные … Слишком короткие …

CSS не был написан таким образом: имена классов (и пользовательские характеристики CSS) минимизируются как часть процесса сборки. Для ваших файлов CSS это происходит автоматом в процессе минификации.

Для HTML (не компонент React) в маркдауне это также происходит автоматом. Для компонентов React вам понадобится classNames. Он работает аналогично пакету classnames, но также делает минимизацию.

JavaScript

Если вы ссылаетесь на имена классов либо пользовательские свойства из файлов JS, вам нужно использовать глобальные константы CSS_CLASSES и CSS_VARS:

JavaScript

У этого подхода есть два достоинства. Первое — это уже упомянутое сжатие. Во-2-х, тем самым мы создаем список, в котором указаны имена классов и где они употребляются. После создания сайта мы можем сопоставить их, чтобы увидеть, добавили ли вы класс, который не употребляется, или использовали класс, который никогда не был определен.

К примеру, на этом сайте я получаю несколько предупреждений от выделения синтаксиса:

Для первого набора предупреждений я мог бы пройти и удалить их из выделенного CSS — несмотря на то что есть дополнительные расходы на обслуживание, чтоб гарантировать, что я добавлю их назад, если они действительно используются.

Что касается второго набора предупреждений, я не достаточно что могу сделать, потому что они генерируются маркером.

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

Статус проекта

Весь код генерации веб-сайта содержится в репо. Он не публикуется как отдельный пакет.

Джейкоб пишет код на GitHub

Если вы желаете использовать код, вы должны иметь возможность его разбить, удалить все во всех папках, не считая /core, а затем добавить свой свой контент по мере необходимости.

Запустите, yarn build чтоб создать рабочую версию сайта. Он выводится в /site.

Запустите yarn start, чтоб запустить сервер разработки. Он будет смотреть за изменениями файлов и при необходимости перестраивать, и вы сможете нажать r, чтобы выполнить полное перестроение. Вы сможете увидеть свой сайт в порту 8080. Он пропускает огромную часть минификации по соображениям производительности либо эргономики разработчика.

Сервер разработки хорошо компилирует только то, что изменилось. Половина этого сводится к активной проверке зависимостей для того, что использовалось на каждой страничке, а затем только к изменению страничек, которые необходимо перестроить. Другая половина этого связана с кешированием, потому, если вы визуализируете компонент Image, вычислительно-ресурсоемкие части кэшируются и еще раз используются при последующих отрисовках страницы.

Когда вы пишете таковой блог, каждая перекомпиляция выполняется за 0,1–0,2 секунды на ноутбуке 6-летней давности.

Предупреждение об обнаружении конфигураций заключается в том, что любые конфигурации в компонентах React требуют перезапуска сервера для чистки кеша модулей Node. Это то, что, возможно, можно исправить, но я этого не делал.

У меня нет особенного интереса (или времени) для публикации и поддержки этого как отдельного проекта. Но, если вы хотите это сделать, то полностью можете. Считайте весь код /core под лицензией MIT — то есть все, что не дословно на моем веб-сайте.

Редакция: Команда webformyself.

Докладывает webformyself.com

от Admin

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

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