Three.js · Yayın · Üretim paketi
Bundle: dağınıklıktan mimari düzene
Geliştirme ağacında yüzlerce modül okunabilirlik için ayrılır; üretimde ise her küçük dosya potansiyel olarak ayrı bir ağ turu demektir. Bundle (paketleme), bu grafiği tarayıcının anlayacağı sınırlı sayıda çıktıya indirger — böylece el sıkışma ve sıra maliyeti küçülür, analiz ve sıkıştırma hatlarına düzgün veri verilir.
Üretim çıktısının dosya adları ve ömrü Önbellekleme · sürüm yayını ile kilitlenir; hangi baytların pakete girdiği ise burada tartışılır. Dağıtım öncesi klasör disiplini için Hosting · yayın öncesi başlığıyla birlikte düşünün — paketleyici, o disiplinin teknik motorudur.
Paketleyicinin üç temel işi
Üretim aracı aynı turda çok iş yapıyor gibi görünür; plan yaparken onu üç soruya bölmek işe yarar: hangi dosyalar birbirini çekiyor, yayından önce çıktıyı ne kadar inceltiyoruz, hedef ortam hangi sözdizimini güvenle çalıştırıyor? Üçüncü sorunun yanıtı ikinciyi dolaylı etkiler: gereksiz polyfill ve uzun yardımcı kod blokları da küçültülmeye muhtaç baytlardır.
Modül grafiği ve birleştirme
Paketleyici önce bir giriş noktasından başlayarak import zincirini dolaşır; ortaya çıkan yapı tek yönlü bir bağlantı kümesidir — bazı dallar ortaktır ve çıktı içinde tekilleştirilir (dedupe). Çözülemeyen yollar, beklenmedik koşullu yükleme veya yanlış paket ana alanı seçimi burada patlar; side effects bildirimleri ise «bu dosya yalnızca ihracattan ibaret değil» uyarısıdır ve küçültme aşamasıyla birlikte okunur. Tek çıktı mı, birbirini bekleyen birkaç öbek mi ürettiğiniz ikinci iş sorununun konusudur: kritik olan yalnızca öbek sayısı değil, kullanıcı yolculuğunun ilk saniyesinde hangi öbeğin gerçekten zorunlu olduğuna karar verebilmiş olmanızdır.
Küçültme (minification)
Bu adım aktarım için metni «sıkıştırmak» ile karıştırılmamalı: sunucunun gzip/Brotli katmanı hâlâ devrededir; küçültücü ise kaynakta yer kaplayan biçim öğelerini atar, güvenli sınırlarda tanımlayıcıları kısaltır ve bazı ifadeleri eşdeğer ama kısa biçimde yazar. Çalışma zamanı semantiği hedeflenir; dolayısıyla hata ayıklama için ürettiğiniz haritalar üretim güvenliğiyle çelişebilir — bu gerilimi kontrol listesindeki source map maddesinde çözümlemek gerekir.
Dönüşüm (transpilation)
Derleyici hedefi (browserslist vb.), dil özelliklerini hangi seviyeye indireceğinizi belirler: sözdizimi dönüşümü ile çalışma zamanı desteği (ör. yeni yerleşikler için polyfill) farklı kalemlerdir — ikisini aynı kutuya atınca paket şişer veya tam tersi, eksik polyfill yüzünden sahne hiç çizilmez. Özel yükleyiciler (loader) ve alternatif çözümleyiciler bu katmana bağlanır; Three.js tarafında bazen ham varlık yolu da burada üretim dostu bir adrese dönüşür. Kısacası paketleyici yalnızca «sıkı bir sıraya koyan» araç değildir; hangi kodun tarayıcıda yasal sayılacağını müzakere eden taraftır.
Holodepth sahnesi için kritik teknikler
Aşağıdaki üç teknik, üst bölümde anlatılan «graf → küçültme → hedef sözdizimi» hattını ürün seviyesinde yönetmek içindir: budama hangi referansın «canlı» sayıldığını, bölümleme hangi yükün ne zaman indirileceğini, gömme ise hangi parçaların ayrı istek olmaktan çıkıp betiğe taşınacağını belirler.
Tree shaking
Derleyici, durağan olan içe aktarma ağacında ulaşılamayan ihracatları eler. Fakat yalnızca yan etki için içe aktarılan dosyalar, «varil» (barrel) üzerinden toplu yeniden ihraç veya import * ile çekilen isim tabloları dalı bilinçsizce şişirebilir — budama o zaman kozmetik kalır. Çalışma zamanında seçilen dinamik yollar statik analizi zayıflatır; fizik veya malzeme örnekleri tek ortak bir kayıttan okunuyorsa, gölge haritası veya PMREM gibi pahalı yan işler «bir demo içinde göründü» diye pakette yaşamaya devam edebilir. Rapor satırına değil bağlantı grafiğine sorun: hangi modül gerçekten çalıştırılıyor, hangisi yalnızca yan etki zinciriyle dayatılıyor?
Code splitting
Öbekler ilk ekrana düşen baytı keser; bedeli zaman çizelgesidir: sahneye geçişte ikinci tur indirme, ayrıştırma ve bazen WASM ya da işçi başlatma beklenir. «Deneyimi başlat» akışı sık görülür; kritik olan öbeğin gelişini yükleme göstergesi veya yer tutucu ile birlikte ele almak ve ağ kopunca sessizce boş tuval bırakmamaktır — tek dev paketteki tek seferlik patlamadan daha kötü algılanabilir. Rota veya düğüm değişince önceki öbek hayatta kalırsa çift yükleme ve dinleyici birikimi oluşur; kamera, renderer ve sahne kökünü hangi öbek oluşturuyorsa durumu orada sıfırlamak gerekir.
Küçük varlıkları gömme
Veri URI veya kısa GLSL parçacığı gibi metinleri doğrudan modüle yazmak, özellikle çok sayıda mikro dosyanın üst üste istek açtığı düzenlerde bir tur tasarruf sağlar; HTTP/2 çoklu küçük dosyayı ucuzlatsa da el sıkışma sıfır olmadığından eşik hâlâ vardır. Base64 gömme ham ikiliye göre daha şişkin taşır ve çözüm bellekte yapılır; geniş doku veya çevre haritasını pakete taşımak önbellek anahtarını ve tarayıcı içi paralelliği bozar. Eşiği birkaç kilobaytın altına sabitlemek için kabaca ölçüm yeter; hassas kararı ürün telemetrisi verir.
Yaygın paketleyici hatları
Seçim üç eksende görünür: geliştirme döngüsünün hızı, yapılandırma kıskaçlarının derinliği ve çıktının «uygulama mı, paylaşılan kütüphane mi» olacağı. Holodepth öğrenme hattında çoğu yeni demoda Vite pratik bir çıkış kapısıdır; elinizde eski bir önbellek veya politika katmanı mirası varsa Webpack hâlâ masada kalır. Rollup ise bazen doğrudan seçilir, bazen de başka aracın içinde üretim motoru olarak görünmez şekilde çalışır.
Vite
Yerel sunucu tarafında kaynak dosyalar çoğu zaman tarayıcıya ESM olarak verilir; sık bağımlılıklar ise önceden paketlenerek sorunlu ortak modüller için sürtünme azaltılır. Kaydet-yenile döngüsü kısalır çünkü tüm grafiği her seferinde baştan üretmek zorunda kalmazsınız — bu da Three.js sahnesinde sahne grafiğini oynatırken yaşayan geliştirici için belirgin rahatlama demektir. Üretim tarafında yapı genelde Rollup eklentileri üzerinden kurulur; dolayısıyla «aynı aracın iki yüzü» değil, iki aşamanın bir ürün politikası olarak düşünün. Özel varlık işleme, yer değiştirmeli proxy veya ortam değişkenleri gerektiğinde yine yapılandırma dosyasına dönersünüz — varsayılan sihirbazın yetmediği nokta burasıdır.
Webpack
Graf tabanlı mimari ve uzun süredir var olan eklenti kümesi, monorepo içinde çoklu giriş, özel yükleyici zinciri ve kurumsal güvenlik adımlarının (lisans tarama, enjeksiyon, özel önbellek stratejileri) araya girmesini mümkün kılar. Öğrenme maliyeti yüksektir; fakat «tek komutla hem vitrin hem iç araçlar» gibi heterojen çıktılar gerekiyorsa esneklik karşılığını verir. Yeni projede bilinçli seçim yapılmadığında yapılandırma dosyası zamanla sürdürülmesi zor bir yığına dönüşebilir — bu yüzden miras projelerde dokunmadan önce hangi kıskaçların gerçekten iş gereksinimi olduğunu envanterlemek gerekir.
Rollup
Çıktı biçimleri (ESM, CJS, IIFE vb.) ve yan etki işaretleri etrafında kütüphane paketlemek için sık tercih edilir; «tek dosya uygulaması» kadar «birden çok girişli paket ailesi» senaryolarında da öne çıkar. Bağımsız kullanıldığında yapılandırma sizdedir; Vite ile geldiğinizde ise üretim adımının omurgası olarak görünmez şekilde çalışabilir — sorun ayıklarken hangi katmanın hangi eklentiyi çalıştırdığını ayırt etmek gerekir. Uygulama demolarında tek satırlık en küçük çıktı hedefiyle öbek sınırları arasında gerilim oluşabilir; üst bölümdeki bölümleme kararlarıyla birlikte okuyun.
Üretim kontrol listesi
Üretim çıktısı sabitlendiğinde kalan sorular çoğu zaman «sunucu bunu hangi kodlamada verdi» ve «tarayıcı hangi öbeği gerçekten önce haklı çıkararak çekmeli» olur. Aşağıdaki üç başlık, paket dosyalarının kabına sığdırdığınız baytların taşıma katmanında ve tarayıcı planlayıcısında nasıl göründüğünü doğrular.
Aktarım sıkıştırması
Küçültülmüş JS/CSS, aktarım öncesi ayrıca gzip veya Brotli ile sıkıştırılmayı bekler; doğrulama yalnızca dosya boyutuna bakmak değil, yanıtta doğru Content-Encoding başlığını ve istemci–sunucu pazarlığını görmektir. Bazı barındırıcılar önceden sıkıştırılmış nesneyi servis ederken yanlış eşlem seçilirse tarayıcı çözümleyemeden kalır — özellikle kenar katmanında dönüşümler vardır ( CDN stratejileri). İkili tarafta ise çoğu model/doku zaten iç sıkıştırma taşır; burada «bir kat daha sıkıştırırım» beklentisi yerine doğru biçim ve kalite seçimini ( Dosya biçimleri) ayrı tabloda tutun.
Source map politikası
Harita dosyası üretim betiğine özgü değişken adlarını ve kaynak ağacını geri açar; bu yüzden herkese açık URL üzerinden sunulması çoğu üründe risk kabulüdür. Uygulanabilir orta yollar: haritayı iç ağda veya kimlik doğrulamalı bir uca taşımak, yalnızca oturum bazlı hata raporlama hizmetine yüklemek veya haritayı tamamen devre dışı bırakıp yığın izlerini örnekleme ile sınırlamak. «Gizli kaynaklar» (hidden sources) veya kısıtlı sembol üretimi gibi seçenekler hata konumunu yakalar fakat yeniden adlandırılmış kodda okumayı zorlaştırır — güvenlik ile operasyon yükü arasında net bir ürün kararıdır.
Önceden getirme (prefetch / preload)
preload yüksek öncelikli «şimdi yakında gerekecek» ipucudur; prefetch ise düşük öncelikli «ileride belki» kanalıdır — ikisini aynı öbeğe yapıştırmak mobilde ana iş parçacığını ve diski yarıştırır. Dinamik öbekler için modulepreload bazen doğrudan hedefi gösterir; yine de gerçek sıradaki ekranı kullanıcı telemetrisi olmadan tahmin etmek zordur: yanlış ipucu, ilk karenin önüne çıkan bant veya CPU işi ile çarpışır. İpuçlarını deneme yayınında açıp kapatarak ölçüm yapın; özellikle düşük güç profillerinde «arka planda iyilik» ilk sahneyi kemirebilir.
Holodepth teknik notu
Paket analizi çıktısı (bundle analyzer) ile «kim şişirdi?» sorusunu düzenli sorun; özellikle örnek içe aktarmaları ve hızlı prototip kodları üretim grafiğine sızmış olabilir. Bu ritüel, kare bütçesi ölçümünün üretim öncesi tamamlayıcısıdır.