TSX Mahal 94% Token Berbanding Pug — Ini Ukurannya

TSX Mahal 94% Token Berbanding Pug — Ini Ukurannya

Biasanya kita fikir markup sebagai sesuatu yang dibaca oleh browser.

Sekarang browser bukan lagi satu-satunya pembaca.

Bila kita beri komponen React kepada Claude, Cursor atau coding agent lain dan minta ia tambah satu field, ubah breakpoint atau pindahkan satu elemen, model perlu membaca komponen itu terlebih dahulu sebelum membuat perubahan.

Maknanya, markup yang kita tulis sudah menjadi sebahagian daripada kos token.

Andrey Kucherenko cuba mengukur perkara ini dalam satu kajian yang membandingkan empat cara menulis struktur web yang sama: HTML, Pug, JSX dan TSX.

Keputusannya agak menarik.

Dalam lima sampel yang diuji, Pug menggunakan token paling sedikit. TSX menggunakan paling banyak. Secara keseluruhan, TSX memerlukan kira-kira 94% lebih token berbanding Pug untuk mewakili struktur yang sama.

Tetapi angka 94% itu bukan bahagian yang paling menarik.

Yang lebih menarik ialah dari mana datangnya token tambahan tersebut.

Kajian asal oleh Andrey Kucherenko ialah Bahagian 3 dalam siri The Tokenomics of Web Development.

Apa sebenarnya yang diuji?

Kajian itu membandingkan empat format:

• HTML
• Pug
• JSX
• TSX

Setiap format mempunyai lima contoh:

1. Tajuk dan perenggan
2. Senarai tiga item
3. Borang login
4. Kad
5. Artikel semantik dengan header, dua section dan footer

Contoh-contoh tersebut sengaja dibuat statik.

Tiada event handler. Tiada data fetching. Tiada logik aplikasi.

Struktur, class, teks dan nesting dikekalkan supaya setara antara semua format. Perbezaan utamanya ialah sintaks yang digunakan untuk menulisnya.

Pengiraan token dibuat menggunakan tiktoken dengan encoding cl100k_base, yang digunakan oleh model-model OpenAI generasi terdahulu.

Itu penting kerana tokenizer bukan sama untuk semua model.

Kajian asal sendiri membetulkan nota tokenizernya: model Claude 4.7 dan terkemudian menggunakan tokenizer lebih baharu yang menghasilkan kira-kira 30% lebih token untuk teks yang sama (lihat nota tokenizer Anthropic). Jadi angka mutlak dalam kajian ini kira-kira 30% lebih rendah daripada jumlah token yang dilihat oleh model Claude semasa. Tokenizer khusus menyerang tepat masalah ini — lihat tokenizer Rust Gigatoken yang 989x lebih pantas.

Yang lebih menarik ialah kedudukan relatif antara empat format tersebut — dan kedudukan wajar diteliti. Lihat metodologi perbandingan adil untuk tokenizer Rust sebelum mempercayai mana-mana jadual benchmark.

Pug menang setiap kali

Dalam kelima-lima sampel:

Pug paling murah. HTML kedua. JSX ketiga. TSX paling tinggi.

Tiada satu pun sampel yang mengubah susunan itu.

Jika jumlah Pug dijadikan 1.000×, kajian itu mendapat kira-kira:

Pug   ×1.000
HTML  ×1.608
JSX   ×1.879
TSX   ×1.944

Sebab itu tajuk kajian mengatakan TSX menggunakan 94% lebih token daripada Pug.

Sekali lagi, ini bukan bermaksud setiap komponen TSX di dunia akan menggunakan tepat 94% lebih token daripada Pug.

Ia bermaksud jumlah token bagi sampel terkawal dalam kajian itu berada pada nisbah itu menggunakan tokenizer yang diuji.

Perbezaan itu penting.

HTML mahal kerana struktur

HTML mempunyai masalah yang agak mudah difahami.

Closing tag.

Contohnya:

<p class="meta">text</p>

Pug boleh menulis perkara yang sama sebagai:

p.meta text

Teks text tidak berubah.

Yang hilang ialah sintaks struktur.

Dalam sampel artikel kajian, terdapat 15 closing tag yang menggunakan 48 token — kira-kira 31% daripada keseluruhan bajet token sampel itu (jadual kajian).

Pug tidak memerlukan closing tag kerana indentation sudah membawa maklumat struktur.

Perkara yang sama berlaku pada attribute.

HTML:  <p class="meta">text</p>   → 16 tokens
Pug :  p.meta text                → 10 tokens

Enam token tambahan itu datang daripada sintaks HTML (tokenisasi per baris dalam kajian).

Kandungan teksnya sendiri mengambil jumlah token yang sama.

Itulah sebab HTML berada kira-kira 61% lebih tinggi daripada Pug dalam jumlah keseluruhan kajian.

Tapi className bukan puncanya

Ini bahagian yang paling menarik.

Banyak perbincangan tentang verbosity JSX biasanya menyalahkan className.

Nampak munasabah.

HTML menggunakan:

class="card"

React menggunakan:

className="card"

Jadi kita mungkin fikir className menyebabkan token tambahan.

Tetapi tokenizer yang digunakan dalam kajian itu tidak bersetuju.

class ialah satu token.

className juga satu token.

Dalam kesemua attribute yang diuji, kedua-duanya menghasilkan jumlah token yang sama.

Jadi kalau anda sedang cuba mengurangkan token untuk AI coding, menukar atau memendekkan className bukanlah penyelesaian.

Punca sebenar berada di tempat lain.

Kos sebenar JSX ialah component wrapper

Pengkaji mengambil setiap fail JSX dan membuang component wrapper sebelum mengira semula token.

Contohnya, sesuatu seperti:

export const Card = () => (
  ...
);

kemudian dibandingkan dengan markup di dalamnya sahaja.

Hasilnya agak mengejutkan.

Untuk contoh list, form dan card, markup JSX di dalam component mempunyai jumlah token yang sama dengan HTML.

Dengan kata lain, JSX markup itu sendiri tidak semestinya lebih mahal.

Overhead datang daripada kod yang membungkus markup itu.

Kajian menganggarkan component wrapper menggunakan sekitar 11 token setiap komponen.

Ada beberapa perbezaan kecil untuk contoh tertentu, termasuk fragment dan formatting.

Tetapi gambaran besarnya jelas:

HTML
  ↓
markup

JSX
  ↓
component wrapper
  ↓
markup

TSX
  ↓
typed component wrapper
  ↓
markup

Jadi isu sebenarnya bukan:

className terlalu panjang.

Ia lebih dekat kepada:

Setiap component boundary membawa sedikit overhead tetap.

TSX menambah lebih sedikit daripada yang disangka

Perbezaan TSX berbanding JSX pula lebih mudah.

Dalam lima contoh kajian, TSX menambah:

: React.FC

pada signature komponen.

Itu bersamaan 3 token tambahan bagi setiap komponen.

Lima komponen:

3 × 5 = 15 tokens

Jumlah keseluruhan kajian (pecahan TSX-ke atas-JSX):

JSX  → 436 tokens
TSX  → 451 tokens

451 - 436 = 15

Jadi dalam benchmark ini, TypeScript bukanlah punca besar perbezaan TSX berbanding JSX.

Itu juga menarik kerana dalam kajian terdahulu siri yang sama, type annotation mempunyai kesan yang jauh lebih besar apabila digunakan pada fungsi yang mengandungi logik.

Di sini komponennya tidak menerima props dan hampir tiada apa yang perlu ditaip.

Kesannya cuma tiga token.

Dua jenis overhead yang berbeza

Bila nisbah semua sampel dibandingkan, ada dua corak yang berbeza.

HTML mempunyai overhead yang berkembang bersama saiz tree.

Lebih banyak element bermakna lebih banyak tag.

JSX dan TSX mempunyai kos tetap di sekeliling tree.

Pada komponen yang sangat kecil, wrapper itu mengambil bahagian yang besar daripada keseluruhan token.

Bila markup semakin besar, kos tetap itu mula "hilang" dalam jumlah keseluruhan.

Itulah sebabnya dalam sampel perenggan dua baris, TSX boleh mencapai kira-kira tiga kali ganda Pug.

Pada sampel artikel yang lebih besar, nisbah itu turun kepada sekitar 1.9×.

Bukan kerana TSX tiba-tiba menjadi lebih cekap.

Kos tetapnya cuma menjadi lebih kecil secara relatif.

Pug menang pada dua perkara sekali gus

Kajian ini turut melihat jumlah aksara dan nisbah token kepada aksara.

Token-per-character boleh dianggap sebagai ukuran kasar tentang bagaimana tokenizer memampatkan sesuatu teks. Lebih rendah bermaksud lebih banyak maklumat boleh diwakili dengan token yang lebih sedikit.

HTML mendapat keputusan paling buruk dalam kumpulan.

JSX dan TSX sebenarnya mempunyai nisbah token-per-character yang lebih baik walaupun source code mereka lebih panjang.

Sebabnya mudah: sebahagian daripada teks tambahan itu ialah JavaScript, dan tokenizer sudah banyak belajar tentang sintaks JavaScript daripada data latihan.

Pug pula mendapat kelebihan pada kedua-dua bahagian:

Lebih sedikit aksara
+
Lebih baik dari segi token-per-character
=
Jumlah token paling rendah

Itu tidak selalu berlaku dalam benchmark bahasa pengaturcaraan.

Dalam kes markup ini, format yang paling pendek juga menjadi format paling murah dari segi token.

Jadi patutkah kita semua tukar ke Pug?

Tidak.

Benchmark ini tidak mengukur semua perkara yang menentukan kos sebenar AI coding.

Ia tidak mengukur:

• kadar kesilapan model
• berapa kali agent perlu mencuba semula
• kebiasaan model terhadap sesuatu syntax
• masa debugging
• kualiti output
• kesan ekosistem
• kos migration

Pug juga jauh kurang biasa dalam codebase frontend moden berbanding JSX.

Model lebih banyak melihat React dan JSX dalam data latihannya.

Jadi mungkin berlaku situasi seperti ini:

Pug
  ↓
agent cuba
  ↓
salah
  ↓
cuba lagi
  ↓
berjaya

JSX
  ↓
agent cuba sekali
  ↓
berjaya

Dalam keadaan itu, JSX mungkin sebenarnya lebih murah walaupun mempunyai lebih banyak token.

Kajian asal sendiri tidak mendakwa sebaliknya.

Jadi angka token ini lebih sesuai dianggap sebagai lantai kos representasi, bukan ukuran lengkap kos AI coding.

Apa yang sebenarnya boleh kita buat?

Yang menariknya, kebanyakan langkah yang masuk akal tidak memerlukan kita menukar stack.

1. Jangan pecahkan komponen tanpa sebab

Component boundary ada kos.

Itu bukan alasan untuk menghasilkan komponen 800 baris.

Tetapi ia juga bermakna tidak semua komponen 12 baris perlu wujud hanya kerana fail induk nampak terlalu panjang.

Kalau satu komponen hanya digunakan sekali dan tidak mempunyai sempadan logik yang jelas, extraction itu mungkin tidak banyak membantu — sekurang-kurangnya dari sudut token.

2. Hantar bahagian yang diperlukan

Kalau anda mahu AI menukar satu attribute dalam markup, tidak semestinya seluruh fail perlu masuk ke dalam prompt.

Imports, wrapper, helper dan kod yang tidak berkaitan semuanya mengambil ruang context.

Kalau yang diperlukan cuma tree markup, hantar tree itu.

3. Jangan salahkan className

Ini mungkin takeaway paling mudah.

Dalam benchmark ini:

class     → 1 token
className → 1 token

Jadi mengurangkan className bukan cara untuk menyelesaikan masalah ini.

Overheadnya berada di tempat lain.

4. Ukur code yang benar-benar masuk ke context

Kalau sesuatu fail kerap dibaca oleh AI agent, token count menjadi lebih relevan.

Bukan kerana 10 atau 20 token akan mengubah dunia.

Tetapi kerana fail yang sama mungkin dibaca semula berkali-kali:

initial analysis
      ↓
edit
      ↓
review
      ↓
test
      ↓
fix
      ↓
review again

Setiap pusingan boleh menghantar semula sebahagian daripada source.

Di sinilah overhead kecil mula terkumpul.

Cuba ukur sendiri

Anda tidak memerlukan benchmark yang rumit untuk melihat kesan ini pada codebase sendiri.

Ambil satu komponen yang kerap anda hantar kepada model dan kira tokennya menggunakan tiktoken:

import sys
import tiktoken

enc = tiktoken.get_encoding("cl100k_base")

with open(sys.argv[1], "r", encoding="utf-8") as f:
    source = f.read()

print(len(enc.encode(source)), "tokens")

Kemudian buang component wrapper dan kira semula.

Untuk contoh yang dikaji, perbezaan itu menunjukkan berapa banyak token yang datang daripada component ceremony berbanding markup sebenar.

Cuma jangan lupa: cl100k_base bukan tokenizer universal.

Model yang berbeza boleh memberikan jumlah token yang berbeza untuk source code yang sama.

Kesimpulannya

Selama bertahun-tahun kita mengoptimumkan code untuk dua pembaca utama:

manusia dan browser.

Manusia perlukan struktur yang jelas.

Browser perlukan output yang boleh diproses.

Sekarang ada pembaca ketiga:

model AI.

Model tidak kisah sama ada sesuatu closing tag itu memudahkan manusia memahami struktur. Ia cuma perlu memproses token itu.

Kajian ini menunjukkan sesuatu yang lebih menarik daripada sekadar "Pug lebih pendek daripada TSX".

className bukan punca utama.

Type annotation TSX juga bukan punca besar dalam contoh ini.

Kos terbesar datang daripada cara kita membungkus markup, khususnya component wrapper dan syntax struktur yang sebenarnya tidak muncul dalam output akhir.

Itu membuka satu soalan yang mungkin akan menjadi lebih penting apabila AI coding menjadi lebih biasa:

Kita sudah ada bundle analyzer untuk mengukur apa yang browser bayar. Bila kita akan ada alat yang mengukur apa yang model bayar?

Mungkin suatu hari nanti build pipeline bukan sahaja memberitahu:

Bundle size: 842 KB

tetapi juga:

Model context cost: 18,421 tokens
Component overhead: 2,130 tokens

Belum ada standard untuk itu.

Tetapi semakin banyak source code dibaca dan ditulis oleh AI, semakin masuk akal untuk mengukurnya.

Dan untuk benchmark ini, kesimpulannya cukup jelas:

Pug menang pada token. TSX menang pada ekosistem. Token count sahaja tidak cukup untuk menentukan mana yang lebih baik.

---

Sumber:

• We Measured the LLM Token Cost of 4 Markup Formats — Andrey Kucherenko / HackerNoon
• tiktoken — OpenAI

Sumber

• HackerNoon: We Measured the LLM Token Cost of 4 Markup Formats: TSX Costs 94% More Than Pug
• OpenAI: tiktoken
• Anthropic: Claude Platform Pricing and tokenizer notes