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

2021-03-19 13:00:40 Web Vitals Report

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

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

2021-03-19 13:00:36 Statoscope

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

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

(Statoscope, кстати, сделал Сергей Мелюков из Яндекса. И у него есть канал @smelukov_dev!) Открыть/Комментировать

2021-03-19 13:00:36 (Также в тему: трёхминутное видео Майкрософта, которое показывает, насколько сильно ощущается разница между лагом в 100 мс и в 5 мс:

) Открыть/Комментировать

2021-03-19 13:00:35 Input Delay

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

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

Оба тула идеальны для демок Открыть/Комментировать

2021-03-19 13:00:35 Slowfil.es

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

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

2021-03-19 13:00:35 Любимые перф-инструменты

Собрал список любимых перф-инструментов, про которые мало кто знает. Ловите: Открыть/Комментировать

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

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

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

2021-01-28 20:55:10 Инкрементальная компиляция в TypeScript

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

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

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

Кстати, у тайпскрипта в wiki на гитхабе есть страничка с названием Perfomance. Там вы можете найти как опции для ускорения компиляции, так и способы написания кода, которые тайпскрипт сможет переварить быстрее. Открыть/Комментировать

2021-01-28 20:55:10 Кстати, классный Валя Семирульник завёл классный канал @valya_reads_issue и пишет там про про ускорение билдов и фронтопс. Вот про TypeScript:

#добраярекомендация Открыть/Комментировать

2021-01-24 18:15:02 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__*/ играет огромную роль в уменьшении размера бандла — и никто про него не знает!) Открыть/Комментировать