Thread by @denisx

Тред о том, как мы оптимизируем размер бандла 🗜️ #dev

1. Писали стили по привычке в kebab-case, в результате чего имели дубликаты в css-маппере

"size-2x": "b2s45",
size2X: "b2s45",

вроде ничего страшного, но вот эти лишние 30-50Кб зачем они?

Перешли на kamelCase: автозаменой где смогли, вручную рефакторим с

[styles[`theme-${theme}`]]
на
[styles[`${theme}Theme`]]

в обратно-несовместимые места с пробросом пропсов добавляем дублирующий функционал, мигрируем в коде/ в базе, потом выпиливаем устаревшее. безшовно на проде

2) Добавили современное сжатие brotli c шареным словарём, сократили в html 35%, в css и js - 21%, в svg 11%. Со страницы срезало ~100Кб.

3) Добавили бандл с современным синтаксисом es6. Уменьшили код на ~35Кб / страница.

Потенциал есть, но многие вендоры идут в es5, не всё зависит от локальной разработки.

4) Удалили propTypes. Сканируйте чанки, старые зависимости могут тащить ненастроенную сборку. Убирает ~15-30Кб

5) Оптимизировали длинну css-классов (немного поколдовали с hash-функцией), сократили ещё 40Кб.

6) Написали плагин для отслеживания коллизий в css-хешах, и сократили длинну с 8 до 4. Минус 15Кб.

7) Компоненты получаем деревом в json, вместе с их uuid(32). Перешли на uuid(10). Минус 20Кб.

8) Имена чанков хешируются в 16 длину. Учитывая имя в пути, можно сократить до 8. До 5Кб.

9) CSS файл отформачен по порядку свойств в правилах, оптимизирован и минимизирован. До 5Кб.

Подобная техника на старом не чанковом сайте срезала 210Кб (несжатых данных)

10) SSR рендерит страницу с critical-css блоком в head. Повторная оптимизация выжала оттуда ещё 3,5Кб (несжатых)

11) Написали плагин для округления rgba/hsla альфа-канала. Из-за calc приходят js-артефакты типа

background-color: rgba(11,31,53,.07999999999999996);

Минус 12Кб (несжатых)

12) Если запрашивать данные (см п.7) с клиента, то html вместе c крит-css можно получить за 1-2 маха (14Кб * 1-2). Сейчас стейт это 65% от документа (65Кб)

13) Бандлим в единый рантайм дестоп и мобайл версии виджетов. Сплит уменьшит на 60Кб.

14) Без http2 балансируем между размером пакетов и их количеством. Переход на мини-чанки, в т.ч. в css, даст буст в ~50-100Кб.

15) Выключение не сео-элементов в lazy сокращает первичную загрузку. Формы, табы, попапы, графика. До 2/3 размера страницы.

16) Замена части графики на svg будет не полной без очистки код-шумов и оптимизации кривых, а также оптимизации к размеру применения. Частенько 32px иконка рисуется на 1000px ретине и вместо 3Кб занимает 40Кб

17) Графика jpg / png, приготовленная к месту использования и оптимизированная автоматикой, даёт отличный профит. Вручную такое очень долго делать.

18) Pdf и doc тоже отлично оптимизируются, до 80%.

19) Вернёмся к коду: проверьте всех вендоров, тот же axios занимает 5кб (в отличие от fetch), а когда он ещё не вынесен как peer, и того больше.

Ещё часто встречаются хоть и мелкие, но модули с дублированием ф-ий, типа куки-оберток и проч. Стандартизируйте.

20) Лоадабл наконец умеет в named export. Без оценки размера, но меньше кода всегда лучше. И настройка линта чище.

21) Также бывает, что компонент мелкий, но в силу причин запрашивает с клиента больше данных чем нужно. Тут легко потерять пару десятков лишних Кб.

22) Перерыв на сео ) #dev #front #frontend #js #javascript #фронтенд

Справедливо замечают, что некоторые оптимизации не так существенны, и дают в br 1-2Кб. Отвечаю обычно так: gzip-6 тоже быстрее чем gzip-9, но это не время рантайма, поэтому надо делать на максимум. 60% трафа мобилок, и доля слабых высока, а выполняется в итоге распакованный код.