Выжимаем каждый байт в веб-приложениях ради скорости и большего блага
Я часто просматриваю Интернет на своем старом телефоне, бесконечно ожидая загрузки приложений только для того, чтобы щелкнуть не ту кнопку, потому что какой-то другой элемент HTML отображается немного позже, чем кнопка. При нажатии на кнопку открывается другая ссылка.
Почему веб-страницы не могут быть ... светлее?
Есть много способов увеличить скорость рендеринга страницы. Один из способов, на котором я хотел бы сосредоточиться сегодня, - это сокращение количества материалов, которые мы отправляем нашим бедным посетителям.
Хотя размер имеет значение, я все же хочу использовать передовую библиотеку компонентов. В последнее время я предпочитаю Preact другим библиотекам компонентов.
Приятное преимущество Preact в том, что он крошечный! Если сравнить размер React 109 КБ (34,8 КБ в сжатом виде) с размером Preact 3 КБ, становится совершенно очевидно, что Preact - привлекательный вариант.
У Preact есть недостаток, заключающийся в том, что он не предлагает столько функций, как React, и к нему нужно некоторое время, чтобы привыкнуть, но я обнаружил, что это не повод для беспокойства.
Теперь, когда мы остановились на нашей библиотеке компонентов, я хотел бы познакомить вас с концепцией, которая в последнее время набирает обороты: фреймворки только на CSS. Основное достоинство фреймворков, содержащих только CSS, заключается в том, что они чрезвычайно легкие и при правильном построении позволяют легко настраивать фреймворк CSS в соответствии с вашими конкретными потребностями.
Мой любимый CSS-фреймворк - Bulma. Он легкий, хорошо документированный и легко настраиваемый.
Наконец, я хотел бы упомянуть, что я большой поклонник TypeScript и буду использовать TypeScript в этой статье.
Хватит разговоров! Давайте создадим примерный проект! Давайте установим preact-cli, чтобы помочь нам создать наш первый проект:
npm i -g preact-cli
Установив Preact CLI, давайте создадим новый проект TypeScript под названием my-app:
preact create typescript my-app
Теперь мы можем запустить наше приложение в фоновом режиме, введя следующую команду в нашем терминале:
npm run dev
Следующим нашим шагом будет приобретение Bulma и ее установка:
npm install bulma node-sass sass-loader --save-dev
Обычно вы хотите сохранить такие зависимости как обычную «зависимость», так как вы просто включаете весь файл CSS. Однако мы собираемся использовать загрузчик CSS, чтобы загружать только тот CSS, который нам действительно нужен для нашего приложения, максимально сокращая наше приложение!
Нам также понадобится загрузчик Sass, чтобы иметь возможность импортировать части библиотеки Bulma.
Давайте создадим файл в каталоге src/style, назовем его index.scss и импортируем необходимый CSS, чтобы добавить кнопку в стиле Bulma на главную страницу нашего веб-приложения:
Кроме того, не забудьте изменить первую строку index.js под src на import “./style/index.scss”.
После просмотра документации по кнопкам для Bulma кажется, что нам нужно создать простой элемент <button> и назначить его классу button. Звучит достаточно просто! Давайте изменим наш код в src/routes/home/index.tsx на:
Вернитесь в свой браузер, и вы увидите красивую кнопку!
Пришло время испытать наше приложение. Давайте запустим следующую команду, чтобы по-настоящему выжать самый маленький кусок кода, который мы только можем придумать:
preact build --no-sw --no-ssr --no-esm serve -s build
Давайте откроем Lighthouse и посмотрим, чем отличается приложение с точно таким же кодом (заменив preact-router на react-router-dom):
Аккуратный! Может показаться, что это не так много, но разница в 50 КБ может значить совсем немного для очень медленных подключений или телефонов.
Я надеюсь, что вы смогли узнать что-то о CSS-фреймворках, Preact и создании небольших веб-приложений, при этом наслаждаясь опытом работы с библиотеками компонентов, такими как Preact. Как всегда, не стесняйтесь обращаться к нам, если у вас есть какие-либо вопросы!
