" + asim.length + " asim
"; return { csv: () => csvUret(olcumler) }; } EOF cat > kaynak/giris-tarayici.js <<'EOF' import { liste, baslik } from "./sablon.js"; export function baslat(kok, istasyon, olcumler) { kok.innerHTML = baslik(istasyon) + liste(olcumler); return { async paneliAc(panelKok) { const { paneliCiz } = await import("./panel.js"); return paneliCiz(panelKok, istasyon, olcumler); }, }; } EOF ``` İki dinamik sınır oluştu: giriş noktası paneli, panel de eşik uyarısı modülünü dinamik olarak istiyor. İkincisi iç içe bir sınırdır ve maliyeti ayrıca ölçülecek. ## Parça Köklerinden Parçalara Bir önceki dersin imza ölçütü aynen geçerlidir, yalnız imzayı üreten küme değişir: giriş noktaları yerine parça kökleri. Bir modülün imzası, onu **statik olarak** erişebilen kökler kümesidir. İmzasında giriş noktası bulunan modül ilk yüklemede iner; bulunmayan modül, imzasındaki köklerden biri istendiğinde iner. ```js // bolme.mjs — statik ve dinamik kenarlardan parca cizgesi, maliyet ve birlestirme. import { readFileSync, statSync } from "node:fs"; import { dirname, join, relative } from "node:path"; const GIRIS = "kaynak/giris-tarayici.js"; const STATIK = /^\s*(?:import|export)[^"']*from\s*["']([^"']+)["']/gm; const DINAMIK = /\bimport\(\s*["']([^"']+)["']\s*\)/g; const cizge = new Map(); // yol -> { boyut, statik[], dinamik[] } const kuyruk = [GIRIS]; while (kuyruk.length > 0) { const yol = kuyruk.shift(); if (cizge.has(yol)) continue; const kaynak = readFileSync(yol, "utf8"); const coz = (e) => [...kaynak.matchAll(e)].map(([, b]) => relative(".", join(dirname(yol), b))); const statik = coz(STATIK), dinamik = coz(DINAMIK); cizge.set(yol, { boyut: statSync(yol).size, statik, dinamik }); kuyruk.push(...statik, ...dinamik); } // Parca koku: giris noktasi ve her dinamik ice aktarim hedefi. const kokler = [GIRIS, ...[...cizge.values()].flatMap((d) => d.dinamik)]; const kapanis = new Map(kokler.map((kok) => { const gorulen = new Set(), yigit = [kok]; while (yigit.length > 0) { const y = yigit.pop(); if (gorulen.has(y)) continue; gorulen.add(y); yigit.push(...cizge.get(y).statik); } return [kok, gorulen]; })); // Imza: modulu statik olarak isteyen kokler kumesi. Ayni imza = ayni parca. const gruplar = new Map(); for (const yol of cizge.keys()) { const anahtar = kokler.filter((k) => kapanis.get(k).has(yol)).join("|"); if (!gruplar.has(anahtar)) gruplar.set(anahtar, []); gruplar.get(anahtar).push(yol); } const ad = (y) => y.replace("kaynak/", "").replace(".js", ""); const bayt = (ms) => ms.reduce((t, y) => t + cizge.get(y).boyut, 0); let parcalar = [...gruplar].map(([anahtar, moduller], i) => ({ ad: "P" + (i + 1), kokler: anahtar.split("|"), moduller, boyut: bayt(moduller), ilk: anahtar.split("|").includes(GIRIS), })); const RTT = 60, BANT = 192; // ms; B/ms (1.5 Mbit/s) const maliyet = (liste) => liste.length * RTT + liste.reduce((t, p) => t + p.boyut, 0) / BANT; const eszamansiz = (liste, kok) => liste.filter((p) => p.kokler.includes(kok) && !p.ilk); function rapor(baslik, liste) { console.log(baslik); for (const p of liste.sort((a, b) => a.ad.localeCompare(b.ad))) { console.log(" " + p.ad + " " + String(p.boyut).padStart(4) + " B " + (p.ilk ? "ilk " : "eszamansiz ") + p.moduller.map(ad).sort().join(", ")); } const ilkListe = liste.filter((p) => p.ilk); console.log(" ilk yukleme " + ilkListe.length + " istek " + String(ilkListe.reduce((t, p) => t + p.boyut, 0)).padStart(4) + " B " + maliyet(ilkListe).toFixed(1).padStart(6) + " ms"); for (const kok of kokler.slice(1)) { const g = eszamansiz(liste, kok); if (g.length === 0) continue; console.log(" " + (ad(kok) + " siniri").padEnd(17) + g.length + " istek " + String(g.reduce((t, p) => t + p.boyut, 0)).padStart(4) + " B " + maliyet(g).toFixed(1).padStart(6) + " ms"); } } console.log("-- cizge --"); for (const [yol, d] of [...cizge].sort()) { console.log(" " + ad(yol).padEnd(16) + String(d.boyut).padStart(4) + " B statik: " + (d.statik.map(ad).join(", ") || "-") + " dinamik: " + (d.dinamik.map(ad).join(", ") || "-")); } console.log(" parca koku: " + kokler.map(ad).join(", ")); rapor("-- imzaya gore parcalar (RTT " + RTT + " ms, bant 1.5 Mbit/s) --", parcalar); // 1. Girisle birlikte inen parcalar ayri tutulmaz: hepsi tek ilk parcada birlesir. const ilkler = parcalar.filter((p) => p.ilk); if (ilkler.length > 1) { const birlesik = { ad: "I1", kokler: [...new Set(ilkler.flatMap((p) => p.kokler))], moduller: ilkler.flatMap((p) => p.moduller), boyut: bayt(ilkler.flatMap((p) => p.moduller)), ilk: true, }; parcalar = [birlesik, ...parcalar.filter((p) => !p.ilk)]; console.log("-- birlestirme: " + ilkler.map((p) => p.ad).join(" + ") + " -> I1 (hepsi ilk yuklemede iniyor)"); } // 2. Esigin altinda kalan ve tek yerden istenen eszamansiz parca, isteyenin parcasina girer. const ESIK = 300; for (const p of [...parcalar]) { if (p.ilk || p.boyut >= ESIK || p.kokler.length !== 1) continue; const isteyen = [...cizge].filter(([, d]) => d.dinamik.includes(p.kokler[0])).map(([y]) => y); const hedefler = [...new Set(isteyen.map((y) => parcalar.find((q) => q.moduller.includes(y))))]; if (hedefler.length !== 1 || hedefler[0].ilk) continue; const hedef = hedefler[0]; hedef.moduller.push(...p.moduller); hedef.boyut += p.boyut; parcalar = parcalar.filter((q) => q !== p); console.log("-- birlestirme: " + p.ad + " (" + p.boyut + " B < " + ESIK + " B, tek isteyen) -> " + hedef.ad); } rapor("-- birlestirme sonrasi --", parcalar); ``` ``` $ node bolme.mjs -- cizge -- bicim 387 B statik: tarih, birim dinamik: - birim 186 B statik: - dinamik: - disa-aktarma 418 B statik: bicim, tarih dinamik: - giris-tarayici 316 B statik: sablon dinamik: panel grafik 458 B statik: birim dinamik: - panel 482 B statik: grafik, disa-aktarma, sablon dinamik: uyari sablon 229 B statik: bicim dinamik: - tarih 227 B statik: - dinamik: - uyari 179 B statik: birim dinamik: - parca koku: giris-tarayici, panel, uyari -- imzaya gore parcalar (RTT 60 ms, bant 1.5 Mbit/s) -- P1 316 B ilk giris-tarayici P2 843 B ilk bicim, sablon, tarih P3 1358 B eszamansiz disa-aktarma, grafik, panel P4 179 B eszamansiz uyari P5 186 B ilk birim ilk yukleme 3 istek 1345 B 187.0 ms panel siniri 1 istek 1358 B 67.1 ms uyari siniri 1 istek 179 B 60.9 ms -- birlestirme: P1 + P2 + P5 -> I1 (hepsi ilk yuklemede iniyor) -- birlestirme: P4 (179 B < 300 B, tek isteyen) -> P3 -- birlestirme sonrasi -- I1 1345 B ilk bicim, birim, giris-tarayici, sablon, tarih P3 1537 B eszamansiz disa-aktarma, grafik, panel, uyari ilk yukleme 1 istek 1345 B 67.0 ms panel siniri 1 istek 1537 B 68.0 ms ``` ## Çıktının Okunması İlk tablo ham imza gruplamasını verir. Panelin kendisi, grafiği ve dışa aktarma modülü tek bir eşzamansız parçada toplanmıştır: üçünü de yalnız panel kökü ister. Şablon, biçim ve tarih modülleri hem giriş noktasından hem panelden erişilebildiği için ilk yüklemededir — paneli bekletmek için bir gerekçe yoktur, zaten inmişlerdir. Bölmenin kazancı ilk satırdadır: toplam 2882 baytın 1345'i ilk yüklemede iner. Panelin 1537 baytı, o panel hiç açılmazsa hiç inmez. Oran küçük bir örnekte gösteriştir; gerçek bir uygulamada grafik çizimi ve dışa aktarma gibi modüllerin ağırlığı, ilk yüklemenin birkaç katı olabilir. `birim.js` modülünün ayrı bir parçaya düşmesi imza ölçütünün doğrudan sonucudur: onu üç kök de ister, dolayısıyla imzası diğerlerinden farklıdır. Ölçüt bu ayrımı doğru yapar ama sonucu her zaman yararlı değildir; bir sonraki bölüm bunu düzeltir. ## Aşırı Bölmenin Maliyeti Her parça bir istektir. İstek başına gecikme, taşınan baytın süresinden büyük olabilir; maliyet satırları bu iki kalemi ayrı ayrı toplar. İlk yüklemede üç parça 187 milisaniye tutar, oysa aynı baytlar tek dosyada 67 milisaniyede iner. Aradaki 120 milisaniye, hiçbir şey kazandırmayan iki fazladan istektir. Buradan iki birleştirme kuralı çıkar. **Birlikte inen parçalar ayrı tutulmaz.** İmzasında giriş noktası bulunan her parça ilk yüklemede iner; bunları ayrı dosyalarda tutmanın tek etkisi istek sayısını artırmaktır. Üç parça tek bir ilk parçada birleşir ve ilk yükleme 187 milisaniyeden 67 milisaniyeye iner. Bu kuralın bir istisnası vardır ve önbelleklemeyle ilgilidir: iki farklı giriş noktasının paylaştığı bir parça — bir önceki dersteki tarayıcı ve sunucu ortaklığı gibi — ayrı tutulduğunda iki hedefte de bir kez indirilir. Aynı gerekçe sürümler arasında da geçerlidir ve beşinci derste ölçülecektir. **Eşiğin altında kalan parça ayrılmaz.** Eşik uyarısı modülü 179 bayttır ve tek bir yerden istenir. Ayrı bir dosya olarak tutulduğunda kendisine 60,9 milisaniyelik bir istek maliyeti ödetir; panelin parçasına katıldığında ise panelin indirmesini 67,1 milisaniyeden 68,0 milisaniyeye çıkarır. Fark tek yönlüdür: bölme, kazandırdığından fazlasını götürür. İç içe dinamik sınırın gizli bir maliyeti daha vardır. Eşik uyarısı, panel yüklendikten **sonra** istenir; iki istek sıralıdır. Kullanıcı paneli açtığında bekleme 67,1 + 60,9 = 128 milisaniyedir, birleştirmeden sonra 68,0 milisaniye. Sıralı istek zinciri, oluşturma modelleri konusunda istemcide oluşturmanın maliyeti olarak ölçülen aynı olgudur; parça düzeyinde de aynı biçimde çalışır. ## Sınır Nereye Konur Bölme sınırı koymanın ölçütü dört sorudur ve dördü de ölçülebilir. **İlk ekranda gerekli mi?** Gerekliyse bölünmez; bölme yalnız gecikme ekler. Panel için yanıt hayırdır, ölçüm listesi için evet. **Kaçınılan bayt, eklenen isteği karşılıyor mu?** Karşılamıyorsa bölünmez. Örnekteki eşik 300 bayttır ve gösterim içindir; gerçek bir eşik, ölçülen istek gecikmesi ile bant genişliğinden hesaplanır. **Kullanıcı eyleminin doğal bir beklemesi var mı?** Bir düğmeye basıldıktan sonra kısa bir bekleme kabul edilebilir; sayfa ilk açılırken beklemek kabul edilmez. Bölme sınırları eylem sınırlarına yerleştirilir. **Kod ne sıklıkla isteniyor?** Ziyaretçilerin çoğunun açtığı bir ekranın kodunu geciktirmek, ilk yüklemeden kazanılanı gezinmede fazlasıyla geri verir. Uygulama Mimarisi kursundaki kod bölme dersi bu takası rota sınırlarında ele almış ve önceden getirmeyi çözüm olarak koymuştu; ölçüt aynıdır, sınırın kaynağı farklıdır — orada rota tanımı, burada `import()` çağrısının bulunduğu yer. ## Bölmenin Getirdiği Yükümlülükler Bölünmüş bir çıktı, tek dosyalı bir çıktının taşımadığı üç yükümlülük getirir. **Parça adları çalışma zamanında çözülmelidir.** Giriş parçası, `import()` çağrısı yürütüldüğünde hangi dosyayı isteyeceğini bilmek zorundadır. Bu bilgi çıktıya bir eşleme olarak yazılır; beşinci ders bu eşlemeyi içerik karmalı adlarla birlikte kuracak. **Bir parçanın yokluğu çalışma zamanı hatasıdır.** Kullanıcı sayfayı açıkken yeni bir sürüm yayımlanırsa, eski sayfanın isteyeceği parça adları sunucuda bulunmayabilir. Bu, dağıtım konusundaki geri alma dersinin doğrudan konusudur ve çözümü eski sürümün dosyalarını bir süre daha yayında tutmaktır. **Yükleme sırası korunmalıdır.** Bir eşzamansız parça, bağımlı olduğu ilk parça değerlendirilmeden çalıştırılamaz. Çıktıdaki yükleyici bu bağı izler; parça sayısı arttıkça izlenecek bağ sayısı da artar. ## Özet - Çizgedeki iki kenar türü zamanla ayrılır: statik içe aktarım aynı anda gerekliliği, `import()` ise zaman sınırı olan bir bağımlılığı bildirir. - Parça kökleri kümesi giriş noktaları ile dinamik içe aktarım hedeflerinin birleşimidir; imzasında giriş noktası bulunan modül ilk yüklemede, bulunmayan modül kökü istendiğinde iner. - Örnekte toplam 2882 baytın 1345'i ilk yüklemede iniyor; panelin 1537 baytı yalnız panel açılırsa indiriliyor. - Her parça bir istektir: birlikte inen parçaları ayrı tutmak ilk yüklemeyi 67 milisaniyeden 187 milisaniyeye çıkarır, eşiğin altındaki bir parçayı ayırmak ise kazandırdığından fazlasını götürür. - İç içe dinamik sınırlar istekleri sıralı hâle getirir; iki sınır tek parçada birleştirildiğinde bekleme 128 milisaniyeden 68 milisaniyeye iner. - Bölme sınırı dört ölçütle konur: ilk ekranda gereklilik, kaçınılan baytın istek maliyetini karşılaması, eylemin doğal beklemesi ve kodun istenme sıklığı. ## Sonraki Adım Parçalar artık hem sayıca hem zamanca doğru ayrılmış durumda. Ama parçaların içeriği hâlâ modül düzeyinde belirleniyor: çizge bir modülün *gerekli* olduğunu söylüyor, içindeki hangi adın kullanıldığını söylemiyor. Paylaşılan parçadaki birim modülü dört ad dışa aktarıyor ve bunların hepsi kullanılmıyor; biçimlendirme modülünün ikinci işlevi yalnız dışa aktarma yolunda çağrılıyor. Sonraki ders çizgeyi modül düzeyinden ad düzeyine indirir: kullanılmayan dışa aktarımların elenmesi, bu elemenin hangi durumlarda yapılamadığı ve paketin bunu bildirimle nasıl mümkün kıldığı.