Webpack ve Modüler Yapı (Chunk, Tree Shaking)

Bu video, Webpack kullanarak modern frontend projelerinde modüler yapı ve performans optimizasyonu tekniklerini detaylı bir şekilde ele almaktadır. Videoda öne çıkan ana başlıklar şunlardır:

• Dynamic Import ve Lazy Loading (0:35): JavaScript dosyalarının çalışma zamanında, ihtiyaç duyulduğunda yüklenmesini sağlar. Bu sayede uygulamanın başlangıç yükleme süresi kısaltılır.
• Code Splitting (7:01): Büyük uygulamalarda kodun daha küçük parçalara (chunks) bölünerek yönetilmesini ve sadece gerekli parçaların indirilmesini sağlar. Videoda giriş noktası bazlı bölme (entry point splitting) ve ortak kodların ayrıştırılması (split chunks) anlatılmaktadır.
• Tree Shaking (21:44): Kullanılmayan ölü kodların (dead code) paketlenmiş dosyadan çıkarılmasını sağlayan bir optimizasyon tekniğidir. Özellikle ES modül yapısı kullanıldığında gereksiz fonksiyonların bundle'a dahil edilmesini önler.
• Side Effects (25:22): Webpack yapılandırmasında sideEffects ayarının kullanımı ile modüllerdeki yan etkilerin kontrol edilmesi ve gereksiz kodların elenmesi konusu işlenmektedir.