Дієта для бандла, крок за кроком

Я витратив кілька тижнів на розмір застосунку, який виходить у веб і мобільні платформи з однієї кодової бази. Не переписування й не зміна архітектури — низка невеликих комітів, у кожного з яких є число. Закономірність, що з цього проступила, цінніша за будь-який окремий прийом: майже кожен великий виграш полягав у прибиранні того, чому там не місце, а майже кожен маленький був справжнім інженерним розміном.

Те, чого там не мало бути

Інструменти розробки у продакшн-бандлі. Найбільший виграш усієї роботи — близько 25% JavaScript — дало виключення дев-інструментів, які пакувалися для користувачів. Такого ніхто не додає навмисно. Воно приходить як типове значення або з оновленням фреймворку, і якщо не подивитися на список чанків, ви про це ніколи не дізнаєтесь.

Сам аналізатор. Аналізатор бандла — це теж залежність. Щойно він сказав вам те, що треба, він стає ще однією річчю, яка їде до користувача. Його прибирання заслужило окремий коміт — маленький жарт, який водночас і є суттю: інструменти, якими ви міряєте вагу, теж важать.

Іконкові шрифти. Саме тут кросплатформні проєкти течуть найбільше. Загальний пакет іконок тягне цілі сімейства шрифтів, а застосунок використовує жменю гліфів. Два кроки: замінити «парасольковий» пакет на легший платформенний, а потім замінити використання одного сімейства на інлайновий SVG — і шрифт зник із вебу повністю. Ще одним кроком решту іконкового шрифту зведено до підмножини реально вживаних гліфів.

Шрифти взагалі. Віддавати TTF там, де працює WOFF2, коштує приблизно вдвічі більше байтів ні за що. Обрізання текстових накреслень до діапазонів символів, які застосунок справді малює, зняло ще 150 КБ з першого завантаження.

Те, що було справжнім розміном

Зміна збирача. Перехід вебзбірки на Turbopack покращив tree-shaking, тож бандл зменшився без ручного прибирання. Робити варто, але це ставка на інструмент, а не рішення щодо власного коду.

Платформенно-умовні імпорти. У спільній кодовій базі легко отримати мобільну бібліотеку bottom-sheet або стос гілок Platform.OS у веббандлі, хоча там усі ці гілки мертві. Зробити такі імпорти умовними — неефектно, марудно, і це дало близько 10% найбільшого чанка.

Ресурси локалізації на мобільному. Постачати лише ті мовні ресурси, які підтримує застосунок, а не все, що пропонує бібліотека, зняло майже мегабайт із розміру встановленого застосунку. Інша платформа — той самий принцип.

Що я зробив би інакше

Подивився б на список чанків до того, як торкатися коду. Кожен великий виграш тут було видно в цьому списку з першого дня — і не видно в загальному числі. Загальне число каже, що проблема є; розбивка каже, чия вона.

І міряв би саме перше завантаження, а не «розмір бандла» абстрактно. Більшість цих змін нічого не дала користувачеві, який повертається з теплим кешем. Усі вони мали значення для того, хто відкриває застосунок уперше, з телефона, на мобільному інтернеті, — а для багатьох продуктів саме цей візит і вирішує все.

Незручна частина

Нічого хитрого тут немає. Ні алгоритму, ні структури даних, ні осяяння — лише подивитися, що насправді лежить у файлі, і спитати навіщо. Це зайняло близько чотирьох тижнів дрібних комітів, і я підозрюю, що така робота відкладається саме тому, що поки її робиш, вона не відчувається як інженерія. Вона просто робить продукт швидшим для кожного, хто його відкриє, — дивна річ, щоб тримати її на дні беклогу.