Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Build Aracı Neden Var? Module Graph, Transpiling, Bundling, Minification ve Dev Server'ın Görevi
Build aracı, tarayıcının tek başına yapamadığı işi yapar: import'ları çözüp module graph'ı kurar, TypeScript'i çevirir, kullanılmayan kodu atar, dosyaları birleştirip küçültür ve içerikten hash'lenmiş adlar verir. Bookstore'un kitap arama widget'ında bundler'sız ESM'in 642 isteğini, Vite 8 ile 3 isteğe inen çıktıyı, Baseline build target'ını ve dev server ile production build farkını gerçek çıktılarla inceliyoruz.
webpack'i Anlamak: Entry, Loader, Plugin, Module Federation ve 2026'da Ne Zaman Hâlâ Gerekli?
webpack her dosyayı bir module sayar; loader'lar dosyayı sağdan sola dönüştürür, plugin'ler derleme hook'larına bağlanır. 5.112 CSS, HTML entry ve TypeScript'i loader'sız destekliyor; yeni projede yerini Vite aldı, ama eski Angular builder'ları, Module Federation ve özel loader'lı büyük projelerde hâlâ gerekli. Bookstore widget'ında loader sırası hatasını, kendi manifest plugin'imizi, splitChunks'ın minSize sınırını ve Module Federation'ın maliyetini ölçüyoruz.
esbuild: Go ile Yazılan Hız, API, Plugin'ler ve Sınırları
esbuild hızlıdır çünkü Go ile native koda derlenir, işi çekirdeklere paralel dağıtır ve AST üzerinde yalnız üç geçiş yapar; lodash-es'in tamamını webpack'ten yaklaşık 22 kat hızlı ama %9 daha büyük bundle'ladı. Bookstore widget'ında CLI'ı, JS API'sini, metafile'ı ve onResolve/onEnd plugin'lerini kullanıyor; type check, HMR, HTML ve code splitting'deki sınırlarını ve Angular CLI'daki yerini görüyoruz.
Vite: Native ESM Dev Server, HMR, Dependency Pre-bundling ve Rolldown ile Production Build
Vite geliştirmede kaynak kodu bundle'lamaz: her dosyayı istendiği anda çevirip native ESM olarak sunar, bağımlılıkları bir kez pre-bundle eder; production'da Vite 8 ile Rolldown, Oxc ve Lightning CSS kullanır. Bookstore widget'ını ASP.NET Core'a bağlayıp /api proxy'sini, HMR'ın ne zaman sayfayı yenilediğini, manifest.json'u okuyan bir Razor tag helper'ı, VITE_ değişkenlerinin bundle'a gömülmesini ve Vite 7'den geçişte sessizce etkisiz kalan ayarları görüyoruz.
Angular CLI'ın Build Sistemi: application Builder, esbuild + Vite, Rolldown'a Geçiş ve webpack'ten Migration
Angular CLI'ın application builder'ı uygulamayı esbuild ile bundle'lar, lazy chunk sayısı eşiği aşınca chunk'ları Rolldown ile yeniden düzenler ve Vite'ı yalnız dev server olarak kullanır. Bookstore'un Angular uygulamasını webpack tabanlı browser builder'dan taşıyıp browser klasörüne kayan çıktıyı, moment'in dil dosyaları yüzünden yarıya inen main bundle'ı, HMR'ın sınırlarını, define/loader option'larını, Baseline tarayıcı hedefini ve TypeScript 6.0 zorunluluğunu görüyoruz.
Code Splitting, Tree Shaking ve Bundle Analizi: Bundle'ı Neyin Şişirdiğini Bulmak
Bundle'ı neyin şişirdiğini tahmin etme, ölç: ng build --stats-json, source-map-explorer, rollup-plugin-visualizer ve webpack-bundle-analyzer paket bazında dağılımı gösterir; tree shaking ise yalnız ESM ve side effect'siz module'lerde çalışır. Bookstore'un Angular uygulamasında lodash'tan named import'un hiçbir şey kazandırmadığını, barrel dosyasının side effect taşıdığını, moment ve lodash'ı çıkarınca main'in 359 kB'tan 224 kB'a indiğini ve Vite'ta vendor chunk kararını görüyoruz.
Source Map'ler: ECMA-426 Formatı, Production'da Hidden Source Map, Error Tracking ve Güvenlik
Source map, minify edilmiş koddaki her konumu kaynak koda eşleyen ve Aralık 2024'ten beri ECMA-426 ile standart olan bir JSON dosyasıdır; hidden source map yalnız sourceMappingURL yorumunu kaldırır, dosya sunucudaysa herkes indirebilir. Bookstore'da mappings alanını Base64 VLQ ile çözüyor, ASP.NET Core'un .map dosyasını sunduğunu görüyor, map'leri deploy'dan ayırıyor ve production hatasını debug ID ile TypeScript satırına eşliyoruz.
Rust Dalgası ve 2025–2026 Sürüm Haritası: Rolldown, Oxc, Rspack, Turbopack, Lightning CSS ve Araç Seçimi
2025–2026'da JavaScript ile yazılan build araçlarının yerini Rust ve Go ile yazılanlar aldı: Vite 8 Rolldown ve Oxc'ye, Angular CLI chunk optimization'da Rolldown'a, Next.js 16 Turbopack'e geçti, Rspack 2.0 webpack uyumlu bir yol sundu. Bookstore widget'ını dört araçla ölçünce küçük projede Rspack'in, 2000 module'de Rolldown ve esbuild'in önde olduğunu, webpack'in süresinin çoğunun Terser'dan geldiğini görüyor ve bir karar tablosu çıkarıyoruz.