Web uygulamalarinin performansi ve deploy guvenilirligi büyük olcude statik asset pipelineinin kalitesine baglidir. JavaScript, CSS, font ve gorsellerin nasil uretildigi, isimlendirildigi, cachelendigi ve dagitildigi; ilk yükleme suresinden güncelleme anindaki kullanıcı deneyimine kadar her seyi etkiler. Bu makalede modern asset pipeline mimarisini ve cache stratejilerini inceliyoruz.
Build pipeline temelleri
Asset pipeline, kaynak dosyalari alip üretim icin optimize edilmis çıktılar üretir. Transpilation, minification, bundling, tree shaking ve source map uretimi bu sürecin parcalaridir.
Arac seçimi
- Vite: Geliştirme icin native ESM, üretim icin Rollup tabanli build.
- Webpack: Olgun ekosistem, kapsamlı plugin destegi.
- esbuild/SWC: Hızlı transpile ve minify katmanı.
Pipeline seçimi proje ölçeği, framework ve takım deneyimine gore yapilmalidir. Önemli olan tutarlı çıktı formati ve otomasyon entegrasyonudur.
Content hash ve dosya isimlendirme
Dosya adina içerik hash eklemek (app.a1b2c3.js), içerik degismedigi surece tarayici cacheinin geçerli kalmasini sağlar. HTML dosyasi hash icermez ve kisa cache suresi ile sunulur; boylece yeni asset referanslari hizla yayilir.
// vite.config.js
build: { rollupOptions: { output: { entryFileNames: 'assets/[name].[hash].js' } } }Cache-Control stratejileri
Iki katmanli cache politikasi en yaygın ve etkili yaklasimdir:
- Hashli assetler:
Cache-Control: public, max-age=31536000, immutable - HTML ve API:
Cache-Control: no-cacheveya kisa max-age ile revalidation
immutable direktifi, içerik hashli dosyalarda gereksiz revalidation isteklerini engeller. HTML her istekte veya kisa surede yeniden dogrulanir ve güncel asset URLlerini icerir.
CDN entegrasyonu
Content Delivery Network, statik assetleri kullanıcıya yakın edge noktalarindan sunar. Origin sunucu yukunu azaltir ve TTFB ile transfer suresini dusurur.
CDN yapılandırma noktalari
- Origin pull veya push modeli seçimi.
- HTTPS sertifikasi ve HTTP/2/3 destegi.
- Brotli ve gzip sikistirma.
- Purge API ile deploy sonrasi cache temizleme.
Hashli dosya adlandirmasi CDN purge ihtiyacini büyük olcude ortadan kaldirir; yalnizca HTML ve manifest dosyalari invalidate edilir.
Code splitting ve lazy loading
Pipeline, route bazli chunklar uretmelidir. Her chunk ayri hash ile cachelenir; yalnizca değişen moduller yeniden indirilir. Dynamic import ifadeleri bu bolunmeyi otomatik tetikler.
import('./admin-panel.js').then(module => module.init());CSS ve kritik yol
CSS dosyalari ayri chunk olarak uretilir. Critical CSS extraction araci ile above-the-fold stiller inline edilebilir. Unused CSS elimination (PurgeCSS, Lightning CSS) üretim bundle boyutunu dusurur.
Görsel asset işleme
Pipeline icinde görsel optimizasyon otomatiklestirilmelidir: resize, format dönüşümü (WebP/AVIF), metadata temizleme. Responsive görsel uretimi icin build zamaninda çoklu cozunurluk ciktilari oluşturulabilir.
Source map yönetimi
Source map dosyalari hata ayiklama icin degerlidir ancak uretimde herkese açık sunulmamalidir. Ayri erişim kontrolu veya error tracking servisine özel yükleme tercih edilir.
Service Worker ve precache
Workbox gibi araclarla hashli assetler precache listesine alinir. Yeni deployda eski cache temizlenir ve güncel manifest yuklenir. Stale-while-revalidate stratejisi API yanitlari icin uygundur.
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);Pipeline CI entegrasyonu
Build adimi CI pipelineinin ayrilmaz parcasidir. Cache katmanları (node_modules, build cache) build suresini kisaltir. Artifact olarak uretilen dist klasoru deploy edilir.
- Dependency install (cache ile).
- Lint ve test.
- Production build.
- Bundle size budget kontrolu.
- Artifact upload ve deploy.
Invalidation ve versiyonlama
Hashli assetlerde invalidation otomatiktir. Hash degismeyen dosyalar cachede kalir. API ve HTML icin etag, last-modified veya kisa TTL ile tutarlılık sağlanır. Deploy sirasinda eski ve yeni assetlerin kisa sure paralel sunulmasi (blue-green) tutarsiz referans riskini azaltir.
Izleme ve regresyon
Her buildde toplam bundle boyutu, chunk sayisi ve en büyük dosyalar raporlanmali. Ani boyut artislari erken tespit edilir. Lighthouse ve WebPageTest ile cache davranisi dogrulanir.
Özet
Etkili asset pipeline; hash tabanli isimlendirme, katmanli cache politikasi, CDN dagitimi ve otomatik CI entegrasyonu uzerine kurulur. Bu yaklaşım hem ilk ziyaret performansini hem de güncelleme sonrasi tutarlılığı garanti altina alir.
Environment-specific build
Development, staging ve production ortamlari icin farklı API endpointleri ve feature flag degerleri build zamaninda enjekte edilir. import.meta.env veya DefinePlugin ile dead code elimination sağlanır; production bundle icinde debug kodu kalmaz.
Font ve ikon pipeline
Font dosyalari subset edilip woff2 formatinda sunulmalidir. SVG sprite veya icon font yerine inline SVG tercih edilebilir. Ikon tree shaking ile yalnizca kullanilan semboller bundlea dahil edilir.
HTTP/2 ve HTTP/3 etkisi
Cok sayida küçük dosya HTTP/1.1de performans sorunu yaratirken HTTP/2 multiplexing ile sorun azalir. Yine de asiri parcalama parse maliyeti üretir; denge chunk boyutu ve sayisi uzerinden kurulmalidir.
Disaster recovery ve rollback
Önceki deploy artifactleri saklanmali; hashli assetler sayesinde rollback aninda eski HTML referanslari hala geçerli olabilir. Immutable storage ve versiyonlu deploy stratejisi hızlı geri alma imkani verir.
Manifest ve PWA entegrasyonu
Web app manifest dosyasi da kisa cache ile sunulmalidir. Ikon setleri build pipelineinda çoklu boyutlarda uretilir. Service worker precache listesi build ciktisindan otomatik uretilir.
Compression ve transfer
Brotli sikistirma gzip uzerinde genelde daha iyi oran verir. Sunucu ve CDN brotli destegi yapilandirilmalidir. Precompressed asset sunumu build zamaninda sikistirma yaparak CPU yukunu azaltir.
Monorepo ve paylasilan assetler
Büyük projelerde paylasilan tasarım sistemi paketleri ayri build edilip versiyonlanir. Semver ile tuketici uygulamalar güncelleme zamanini kontrol eder. Internal CDN veya npm registry uzerinden dagitim yapilir.
Asset deduplication
Webpack splitChunks veya Rollup manualChunks ile vendor ve common moduller ayri cachelenebilir chunklara ayrilir. Ayni kutuphane birden fazla entry point tarafindan kullanıldığında tekrar indirme onlenir.
Edge caching ve stale content
CDN edge node cache TTL degerleri origin Cache-Control ile uyumlu olmalidir. Purge işlemi yalnizca hashlenmemis kaynaklar icin gerekir. Surrogate-Key veya cache tag mekanizmalari ilişkili icerikleri toplu invalidate eder.
Build performansi
Incremental build, persistent cache ve esbuild tabanli transform build suresini dakikalardan saniyelere indirebilir. CI ortaminda cache restore basarisizligi build suresini uzatir; cache key stratejisi lockfile hash uzerine kurulmalidir.
Asset güvenliği
Build ciktisi integrity hash ile manifest dosyasina yazilir. Deploy sirasinda dosya bozulmasi veya tampering tespit edilir. Subresource Integrity ile tarayici tarafinda da dogrulama yapilabilir.
Long-term caching ve versioning
Semantic versioning ile major sürüm degisikliklerinde asset URL yapisi da guncellenebilir. Eski sürüm assetleri belirli sure daha sunulabilir; bu rollback ve tarayici cache uyumlulugu sağlar. Depolama maliyeti ile kullanıcı deneyimi arasinda denge kurulmalidir.
Observability
CDN ve origin loglarinda cache hit ratio izlenmelidir. Düşük hit ratio yapılandırma hatasina veya cok kisa TTL degerine isaret eder. Build artifact boyutu trendi de performans regresyonu icin erken uyarı sağlar.
Pipeline checklist
Her release oncesi hashli asset referanslari, cache header degerleri, CDN invalidation ihtiyaci ve bundle budget kontrolu yapilmalidir. Bu checklist deploy guvenilirligini ve kullanıcı deneyimini birlikte korur. Otomasyon bu adimlari insan hatasindan koruyarak tutarlı sonuç verir. Pipeline metrikleri zaman icinde olgunlasan bir asset stratejisinin temelini oluşturur. Iyi tasarlanmis bir pipeline hem geliştirici verimliligini hem son kullanıcı performansini yukseltir.
