Frontend build araçları: kodu tarayıcıya hazırlayan paketleyiciler

Bundler ve build aracı nedir?

Bundler (paketleyici), bir web uygulamasındaki çok sayıda kaynak dosyayı (JavaScript modülleri, stil dosyaları, görseller) bağımlılık ilişkilerini çözerek tarayıcının verimli biçimde yükleyebileceği birkaç çıktı dosyasında birleştiren araçtır. Frontend build aracı ise bundler'ı da kapsayan daha geniş bir kavramdır: kodu dönüştürme, küçültme, geliştirme sunucusu çalıştırma ve üretim çıktısı hazırlama işlerini birlikte yürütür.

Bu araçlar olmadan modern bir arayüz geliştirmek zordur. Çünkü yazdığımız kod genellikle tarayıcının doğrudan anlayacağı biçimde değildir: TypeScript, JSX, Sass ya da dosya başına yüzlerce küçük modül gibi. Build aracı bu girdiyi alıp tarayıcının çalıştırabileceği ve olabildiğince küçük bir çıktıya çevirir.

Bilinen örnekler Webpack, Vite, esbuild, Rollup ve Parcel'dır. Hepsi aynı temel sorunu çözer ama mimarileri ve çalışma hızları farklıdır.

Bir build aracı hangi işleri yapar?

Çekirdek işler şunlardır:

• Bağımlılık çözümleme: Giriş dosyasından başlayarak içe aktarılan (import) her modülü bulur ve bir bağımlılık grafiği çıkarır.
• Dönüştürme: TypeScript ya da JSX gibi kaynak biçimlerini düz JavaScript'e, modern sözdizimini eski tarayıcıların da anlayacağı biçime çevirir.
• Birleştirme ve parçalama: Modülleri bir ya da birkaç dosyada toplar, uygulamanın yalnızca gerektiği anda yüklenecek parçalarını ayırır (code splitting).
• Küçültme ve ağaç sallama: Boşlukları ve uzun adları kısaltır, hiç kullanılmayan kodu çıktıdan atar (tree shaking).
• Varlık yönetimi: Görsel, yazı tipi ve stil dosyalarını işler, içerik değişince dosya adını da değiştiren sürümleme yapar ki tarayıcı önbelleği doğru çalışsın.
• Geliştirme sunucusu: Kod değiştikçe tarayıcıyı canlı güncelleyen yerel bir ortam sağlar.

Bu işlerin her biri yapılandırma gerektirir; araçlar arasındaki fark büyük ölçüde bu yapılandırmanın ne kadar açık ya da otomatik olduğudur.

Webpack, Vite ve esbuild: temel fark

Webpack uzun süre sektör standardı oldu. Güçlü bir eklenti ve yükleyici (loader) sistemine sahiptir ve çok geniş yapılandırma esnekliği sunar. Geliştirme sırasında bile uygulamanın tamamını paketlediği için büyük projelerde başlangıç ve güncelleme süreleri uzayabilir.

Vite farklı bir yol izler. Geliştirme sırasında kodu önceden paketlemez; tarayıcının yerel modül desteğinden yararlanarak dosyaları istendikçe sunar. Bu sayede sunucu çok hızlı açılır ve değişiklikler anında yansır. Üretim çıktısı içinse ayrı bir paketleme adımı çalıştırır.

esbuild, çok hızlı çalışması için derlenen bir dilde yazılmış bir paketleyici ve dönüştürücüdür. Tek başına kullanılabildiği gibi başka araçların içinde de çalışır. Hızını yapılandırma esnekliğinin bir kısmını feda ederek sağlar; bu nedenle karmaşık dönüşüm gerektiren senaryolarda başka araçlarla birlikte kullanılması yaygındır.

Özetle: Webpack esneklik ve olgunluk, Vite geliştirici deneyimi ve hız, esbuild ham hız sunar.

Kurgusal bir örnek

Örneğin bir sipariş takip uygulaması yazıldığını düşünelim. Kod yüzlerce bileşene, bir TypeScript yapılandırmasına ve stil dosyalarına bölünmüş durumda. Geliştirici kayıt formunu değiştirdiğinde, Vite tabanlı bir kurulumda yalnızca o modül yeniden işlenir ve tarayıcıda sayfa durumu bozulmadan güncellenir. Webpack tabanlı eski bir kurulumda aynı işlem daha uzun sürebilir.

Üretim zamanında ise build aracı çalıştırılır. Çıktıda ana uygulama parçası ile yalnızca yönetim ekranında kullanılan ayrı bir parça oluşur; sıradan kullanıcı yönetim kodunu hiç indirmez. Dosya adlarına içerik özeti eklendiği için kod değişmediği sürece tarayıcı eski dosyayı önbellekten kullanır.

Bu akış, bir build aracının geliştirici hızını ve son kullanıcı performansını nasıl aynı anda etkilediğini gösterir.

Araç seçerken dikkat edilecekler

Seçim, projenin yaşına ve ihtiyacına bağlıdır. Yeni başlayan bir uygulamada Vite çoğu zaman düşük yapılandırma ve hızlı geri bildirim sağladığı için makul bir başlangıçtır. Webpack'in özel yükleyici ve eklenti ihtiyacı olan, mevcut kurulumu olgun bir projede ise geçişin maliyeti faydadan büyük olabilir.

Karar ölçütleri: proje büyüklüğü, ekibin mevcut bilgisi, ihtiyaç duyulan eklentilerin varlığı, hedef tarayıcı kapsamı ve geliştirici deneyimine verilen önem. Çerçeve (React, Vue, Next.js gibi) çoğu zaman kendi build altyapısını birlikte getirir; bu durumda aracı elle seçmek yerine çerçevenin varsayılanını anlamak daha verimlidir.

Yaygın hata: Build çıktısını hiç incelememek. Paket analiz araçlarıyla hangi kütüphanenin çıktıyı şişirdiğini görmek, çoğu zaman yapılandırma değiştirmekten daha büyük kazanç sağlar.

Mindset programlarında nerede çalışılır?

Mindset kataloğundaki "Frontend Build Araçları (Vite, Webpack, esbuild)" eğitimi şu modüllerden oluşur: modül sistemleri ve paketleme temelleri, Vite ile geliştirme ve üretim, Webpack ile üretim yapılandırması, analiz, optimizasyon ve karar.