Нас роками вчили дробити компоненти. AI-агенти зробили цю пораду платною.

Кожен окремий файл коштує вашому агенту 11 токенів — не за код усередині, а за те, що це окремий файл. Ставка однакова, хоч би що там: два рядки чи двісті. У кодовій базі зі 200 компонентів це близько 2200 токенів самої лише церемонії, ще до того, як модель побачила перший елемент. І платите ви не один раз: кожен цикл рев'ю надсилає файли наново, кожна повторна спроба — знову.

Знаю заперечення, бо сам його мав: це ж, напевно, className, camelCase, htmlFor.

Ні.

class="card-img" — 5 токенів.
className="card-img" — теж 5.

Для всіх дванадцяти атрибутів класу в моїх семплах вийшло 53 і 53.

Тоді я зняв обгортку з кожного JSX-файлу й порахував саму розмітку — проти того самого коду на чистому HTML.

list: 36 проти 36
form: 76 проти 76
card: 88 проти 88

Токен у токен. На цих трьох семплах розмітка не додала жодного токена — уся надбавка припала на функцію навколо неї.

Якби плата була за атрибут, її зменшували б меншою кількістю класів. Але плата — за межу. Отже, її зменшує менша кількість компонентів, але більших.

Це не заклик писати файли на 800 рядків. Це заперечення проти компонента на 12 рядків, який зʼявився лише тому, що батьківський виглядав перевантаженим.

Чотири формати розмітки, п'ять однакових семплів, один токенізатор.

Pug — 232
HTML — 373
JSX — 436
TSX — 451

TSX виходить на 94% дорожчим за Pug.

Частина 3 «The Tokenomics of Web Development»: https://hackernoon.com/we-measured-the-llm-token-cost-of-4-markup-formats-tsx-costs-94percent-more-than-pug