Иван Акулов про разработку

@iamakulov_channel Нравится 3

JS · React · веб-перформанс · разработка и архитектура
Твитер: https://twitter.com/iamakulov
Помогу с производительностью: https://3perf.com
По всем вопросам (рекламу не продаю): @iamakulov
Чатик канала: @iamakulov_channel_chat
Гео и язык канала
Россия, Русский
Категория
Технологии


Написать автору
Гео канала
Россия
Язык канала
Русский
Категория
Технологии
Добавлен в индекс
02.08.2017 13:27
реклама
Биржа рекламы в Telegram №1
+10 554 заказов в системе за месяц +493 новых каналов
Рекламная биржа Telegram-ботов!
Каталог ботов Telega.in для покупки и продажи рекламы
Telegram Analytics
Подписывайся, чтобы быть в курсе новостей TGStat.
3 373
подписчиков
~0
охват 1 публикации
~331
дневной охват
N/A
постов в день
N/A
ERR %
2.78
индекс цитирования
Репосты и упоминания канала
20 упоминаний канала
1 упоминаний публикаций
36 репостов
Валя читает ишью
James Akwuh
Вебня
Ваня делает PerfPerfPerf
Ваня делает PerfPerfPerf
The Arctic Fox Code Vault
Nothing but Coding
Гудят ссылки
Гудят ссылки
Вебня
Вебня
FSCP
Frontend Guild
Жабаскрипт
Frontend Info
Вебня
ФРОНТ И ЭНД
ФРОНТ И ЭНД
ТОП каналов Telegram
KyivJS
Печеняй!
Печеняй!
ФРОНТ И ЭНД
Вебня
ФРОНТ И ЭНД
HiPO
Frontend Doge
Frontend Doge
Виталий о бизнесе
Heisen MINDS
Gambala.links
Каналы, которые цитирует @iamakulov_channel
Сергей Мелюков
Валя читает ишью
Вебня
James Akwuh
Вебня
Вебня
Веб-стандарты
Жабаскрипт
Juliarderity
Вебня
Вебня
Juliarderity
Вебня
Frontend Weekend
Безос позвонит
TODO: Update the channel name
Remote IT (Inflow)
Родионов
Ваня делает PerfPerfPerf
Ваня делает PerfPerfPerf
Ваня делает PerfPerfPerf
Ваня делает PerfPerfPerf
Ваня делает PerfPerfPerf
Things I read
Things I read
Родионов
Grumpy Website
Родионов
Grumpy Website
Grumpy Website
Web Tip @ James Akwuh
Design & Productivity
Последние публикации
Удалённые
С упоминаниями
Репосты
Расскажите про ещё какие-то тулы, которые вы знаете?
7️⃣ Font Style Matcher

meowni.ca/font-style-matcher помогает найти фолбэк-шрифт, который похож по размеру на кастомный.

Если на сайте подключён шрифт Merriweather, а фолбэком стоит Georgia (которая визуально меньше), то, когда Merriweather загрузится, страница скакнёт. Из-за этого получится плохой Cumulative Layout Shift.

А вот Font Style Matcher поможет подобрать такой размер Georgia, который максимально похож на Merriweather, и убрать скачки страницы 💅
Читать полностью
6️⃣ useWhyDidYouUpdate

usehooks.com/useWhyDidYouUpdate — это Реакт-хук, который печатает, почему какой-то компонент перерисовался. Его даже не надо устанавливать — просто скопируйте и вставьте 👌

Идеально работает, чтобы продебажить перформанс одного компонента. И подключается гораздо проще, чем why-did-you-render
Читать полностью
5️⃣ Data Studio

А вот если вы не собираете данные в аналитику, попробуйте сделать вот такой отчёт: https://datastudiohelp.com/core-web-vitals-in-data-studio-using-the-crux-dashboard/

Открываете шаблон → клонируете к себе, указывая новый адрес сайта → получаете огромный перформанс-отчёт.

Внутри
— Core Web Vitals
— другие метрики типа Time to First Byte или First Paint
— и исторические данные
Читать полностью
4️⃣ Web Vitals Report

web-vitals-report.web.app строит отчёт по Core Web Vitals на основании вашей гугл-аналитики. (Правда, эти данные нужно в аналитику сначала залить — с помощью пакета web-vitals.)

Это единственный тул, который я ещё не пробовал (не собираю Core Web Vitals в аналитику). Но некоторым клиентам он пригождается
Читать полностью
3️⃣ Statoscope

statoscope.tech — это как webpack.github.io/analyse, только красивый, развивающийся и с дополнительными фичами.

Мой главный юзкейс:
вызвать webpack --json > stats.json →
закинуть файл в Statoscope →
увидеть, почему именно забандлена та самая огромная библиотека.

(Statoscope, кстати, сделал Сергей Мелюков из Яндекса. И у него есть канал @smelukov_dev!)
(Также в тему: трёхминутное видео Майкрософта, которое показывает, насколько сильно ощущается разница между лагом в 100 мс и в 5 мс: https://www.youtube.com/watch?v=vOvQCPLkPt4)
2️⃣ Input Delay

input-delay.glitch.me даёт повводить текст в поле ввода, которое лагает на 50-150 мс. (Ужасно бесит.)

bl.ocks.org/esjewett/2b188f00eef012507ae3 делает то же самое, но с курсором мыши.

Оба тула идеальны для демок
1️⃣ Slowfil.es

slowfil.es даёт ссылку с огромным (и настраиваемым) временем ответа сервера.

Супер-удобно, чтобы посмотреть, как сайт поведёт себя, если какой-то CSS или JS-файл начнёт грузится вечно
Любимые перф-инструменты

Собрал список любимых перф-инструментов, про которые мало кто знает. Ловите:
Long time no hear! Сегодня поговорим в Клабхаузе с Ромой Лютиковым (перф-инженером в Pitch) про то, как готовить перформанс в Реакт-приложениях. Ну и послушаем ваш опыт, конечно.

Сегодня, 17:00 по Киеву · 18:00 по Москве

Приходите (особенно если у вас большое Реакт-приложение, и вы там чё-то оптимизировали — ужасно интересно послушать): https://www.joinclubhouse.com/event/xeg9GqNG
Читать полностью
Репост из: Валя читает ишью
Инкрементальная компиляция в TypeScript

И чтоб далеко не ходить, сразу же расскажу про самый простой способ в разы ускорить сборку TS проектов.

У тайпскрипта есть опция incremental. При её включении TS складывает информацию о проекте в .tsbuildinfo файлики, а при последующих запусках использут их для ускорения проверки типов и эмита файлов.

В Альфа-Банке мы смогли ускорить компиляцию в 7 раз, с 2 минут до 17 секунд.

Кстати, у тайпскрипта в wiki на гитхабе есть страничка с названием Perfomance. Там вы можете найти как опции для ускорения компиляции, так и способы написания кода, которые тайпскрипт сможет переварить быстрее.
Читать полностью
Кстати, классный Валя Семирульник завёл классный канал @valya_reads_issue и пишет там про про ускорение билдов и фронтопс. Вот про TypeScript:

#добраярекомендация
5) А дальше произошло вот что:

— Куча других инструментов тоже начала использовать комментарии /*#__PURE__*/. Например, babel-preset-react добавляет их перед React.createElement, а babel-plugin-styled-component — перед styled.button, styled.div и т.д.

— Появился Terser — форк UglifyJS. Terser стал минификатором по умолчанию в webpack и по-прежнему отвечает за бо́льшую часть три-шейкинга

— /*#__PURE__*/-комментарий появился в документации Terser (вкупе с парой других специальных комментариев): https://terser.org/docs/api-reference.html#annotations

— А эта история стала моим любимым рассказом на конференциях (потому что /*#__PURE__*/ играет огромную роль в уменьшении размера бандла — и никто про него не знает!)
Читать полностью
​​4) Чтобы решить это, придумали комментарий /*#__PURE__*/.

/*#__PURE__*/ обозначает, что вызов функции, который идёт сразу за ним, не имеет никаких сайд-эффектов. То есть этот вызов не изменит ничего в приложении — и от его удаления ничего не поменяется.

И в 2017-м Babel начал добавлять /*#__PURE__*/-комментарий перед IIFE, которые он генерирует. А UglifyJS начал распознавать этот комментарий — и удалять pure-функции, если результат их вызова не используется:
Читать полностью
​​3) Проблема с IIFE в том, что UglifyJS (который тогда отвечал за три-шейкинг в webpack-е) не знал, когда этот IIFE безопасно удалить.

IIFE может просто создать и вернуть класс — и больше ничего не делать. А может попутно отправить запрос на сервер. UglifyJS не знает, что именно происходит внутри IIFE — поэтому не может его убрать.
Читать полностью
​​2) Почему это происходило?

В 2016 классы были просто синтаксическим сахаром вокруг функций. Поэтому Babel конвертировал классы в функции — и оборачивал эти функции в IIFE («immediately invoked function expression» — «функция, которая сразу же вызывается»).

Выглядело это примерно вот так:
Читать полностью
​​1) В 2016 кто-то заметил, что, если пропустить JS-класс через Babel, этот класс перестанет три-шейкаться. То есть webpack не сможет удалить этот класс из бандла — даже если он нигде не используется.

React-компоненты тогда активно использовали классы, поэтому для React-приложений это был kind of a big deal.
Читать полностью
​​Pure-комментарий

Если вы однажды заглянете в неминифицированный бандл, то в куче мест¹ вы увидите вот такой автоматический комментарий:

/*#​__PURE__*/

Что это за комментарий?

(¹ — точно увидите в Реакт-приложениях, с другими фреймворками не проверял)
А также: вопросы, вопросики, вопросища, ¿⸮⁇;

Я напоминаю, что мне можно задавать любые вопросы по перформансу. Вопрос выше, например, задал Никита Кирсанов в твитере.

Расскажите, что нового хотели бы узнать про перформанс. Какой вопрос мучает? В чём никак не добираетесь разобраться?

Пишите прям тут в комментариях. На какие-то вопросы я, возможно, отвечу прямо в канале 🙂