Tree shaking, nihai bir JavaScript paketinden kullanılmayan kodun ortadan kaldırılması sürecini tanımlamak için modern web geliştirmede kullanılan teknik bir terimdir. Uygulama içinde aslında hiç başvurulmayan veya yürütülmeyen kodu belirlemek için ES modül sözdizimine, özellikle import ve export deyimlerine dayanır. Projenizin bağımlılık grafiğini analiz ederek, derleme araçları dosyalar bir sunucuya dağıtılmadan önce bu ölü kodu güvenli bir şekilde kaldırabilir; bu da son kullanıcı için daha küçük dosya boyutları ve daha hızlı yükleme süreleri ile sonuçlanır.
Tree shaking arka planda nasıl çalışır?
Özünde tree shaking, statik bir bağımlılık ağacı oluşturarak çalışır. ES modüllerini kullandığınızda, dosyalar arasındaki ilişkiler açıktır. Bu içe ve dışa aktarmalar statik olduğundan, Webpack veya Rollup gibi bir bundler bir modülün hangi bölümlerinin gerçekten istendiğini analiz edebilir. Bir geliştirici bir kütüphaneyi içe aktarıyor ancak dışa aktarılan on fonksiyonundan yalnızca birini kullanıyorsa, tree shaking süreci diğer dokuz fonksiyonun asla çağrılmadığını belirler. Derleme aracı daha sonra bu kullanılmayan blokları nihai çıktının dışında bırakarak, nihai yürütmeye katkıda bulunmayan kod ağacının dallarını etkili bir şekilde budar.
Bu süreç için neden ES modül sözdizimi gereklidir?
Tree shaking, ES modüllerinin deterministik doğasına bağlıdır. Dinamik olan ve çalışma zamanı değerlendirmesine dayanan CommonJS gibi eski modül sistemlerinin aksine, ES modülleri statiktir. Bu, import ve export ifadelerinin kodun en üst düzeyinde görünmesi gerektiği ve çalışma zamanında koşullu veya hesaplanmış olamayacağı anlamına gelir. Yapı sabit olduğundan, bundler’lar JavaScript kodunu çalıştırmaya gerek kalmadan hangi kod yollarının kullanılacağını güvenilir bir şekilde tahmin edebilir. Bu statik analiz, geliştiricilerin derleme aşamasında kullanılmayan kodu otomatik olarak temizlemesini sağlayan temeldir.
Kaçınılması gereken yaygın tuzaklar nelerdir?
Süreç otomatik görünse de, çeşitli yaygın kodlama alışkanlıkları tree shaking’in etkili bir şekilde çalışmasını engelleyebilir. Kodunuz, küresel nesneleri veya prototip özelliklerini değiştirmek gibi yan etkiler (side effects) kullanıyorsa, bundler kullanılmıyor gibi görünse bile uygulamanın bozulmasını önlemek için kodun tutulması gerektiğini varsayacaktır. Dahası, bir klasördeki her şeyi dışa aktaran barrel dosyalarının kullanılması bazen bundler’ları gerekenden fazlasını içe aktarmaya yönlendirebilir. Temiz paketleri korumak için dışa aktarımlarınızı açık tutun ve küresel kapsam kirliliğinden kaçının.
Modül sistemlerinin karşılaştırması
| Sistem Türü | Tree Shaking Desteği | Analiz Yöntemi |
|---|---|---|
| ES Modülleri | Tam Destek | Statik Analiz |
| CommonJS | Destek Yok | Dinamik Çalışma Zamanı |
| AMD | Sınırlı | Çalışma Zamanı Değerlendirmesi |
Bir projede tree shaking uygulamak için adımlar
Projenizin kod elemesi için optimize edildiğinden emin olmak için, derleme yapılandırmanız sırasında sistematik bir yaklaşım izleyin. package.json dosyanızı ve bundler ayarlarınızı kontrol ederek başlayın, ardından derleyicinizin bundler’ın bunları analiz etme şansı bulmadan önce ES modüllerini daha eski biçimlere dönüştürmediğini doğrulayın.
- Tüm proje dosyalarında yalnızca ES modül sözdizimini (import/export) kullanın.
- Babel gibi derleyicinizi, modules: false ayarını yaparak ES modüllerini sağlam tutacak şekilde yapılandırın.
- package.json dosyanızın, bundler’a hangi dosyaların temizlenmesinin güvenli olduğunu söylemek için sideEffects bayrağını içerdiğinden emin olun.
- Çoğu bundler tree shaking’i özellikle yalnızca küçültülmüş üretim yapıları için etkinleştirdiğinden, derlemenizi üretim modunda çalıştırın.
- Kullanılmayan bağımlılıkların kaldırıldığını doğrulamak için Webpack Bundle Analyzer gibi araçları kullanarak nihai paketinizi denetleyin.
Alien Road tree shaking’i nasıl uygular
Tipik bir çalışmada Alien Road, müşterilerimiz için standart bir performans optimizasyon denetiminin bir parçası olarak tree shaking’i entegre eder. Şişirilmiş üçüncü taraf kütüphanelerinin neden olduğu olası dar boğazları belirlemek için bir müşteri projesinin derleme sürecini inceleyerek başlıyoruz. Bir mağaza yalnızca bir fonksiyon gerektiğinde tüm yardımcı program kütüphanelerini içe aktarıyorsa, içe aktarımları belirli fonksiyonları hedefleyecek şekilde yeniden düzenliyoruz. Bu süreç genellikle toplam paket boyutunu önemli ölçüde azaltır ve bu da sayfa hızı metriklerini doğrudan etkiler. Ardından, müşteri ekibinin gelecekteki özellik dağıtımlarında bu standartları koruyabilmesi için bu değişiklikleri performans raporlarımızda belgeliyoruz.
Temiz kodu korumak için en iyi uygulamalar
- Büyük monolitik nesneler yerine fonksiyonları ayrı ayrı dışa aktaran modüler kütüphaneleri tercih edin.
- Gereksiz bağımlılık zincirlerine neden oluyorlarsa barrel dosyalarını (her şeyi dışa aktaran index.js dosyaları) kullanmaktan kaçının.
- Kütüphane güncellemelerinin beklenmeyen yan etkilere yol açmadığından emin olmak için paketlerinizi sık sık test edin.
- Derleme araçlarınız için statik analizi daha kolay hale getirmek üzere bağımlılık ağacınızı sığ tutun.
- Ölü kodu vurgulayan IDE linter’larını kullanarak kullanılmayan içe aktarımları düzenli olarak temizleyin.
Bu hafta nereden başlanmalı
Mevcut projenizin paket boyutunu denetleyerek başlayın. Bir bundler kullanıyorsanız, derleme çıktınızın görsel bir raporunu oluşturun. Tanımadığınız veya kullanmadığınız kütüphane kodunu içeren büyük parçalar arayın. Bunları belirledikten sonra, belirli bileşenler yerine tüm kütüphaneyi içe aktarıp aktarmadığınızı kontrol edin. Genellikle, tek bir import ifadesini import { X } from ‘library’ yerine import X from ‘library/X’ olarak değiştirmek anında sonuç verebilir. Bu küçük değişiklik, uygulamanızın dağıtım performansını bu hafta optimize etmeye başlamak için harika bir yoldur.
Sıkça Sorulan Sorular
Tree shaking tüm JavaScript kütüphaneleriyle çalışır mı?
Tree shaking en iyi ES modül sözdizimi kullanılarak yazılmış kütüphanelerle çalışır. Bir kütüphane CommonJS gibi eski formatlar kullanılarak yayınlandıysa, bundler kullanılmayan kodu ortadan kaldırmak için statik analiz gerçekleştiremez. Proje bağımlılıklarınıza eklemeden önce kütüphanenin tree shaking’i destekleyip desteklemediğini veya modüle özel bir giriş noktası sunup sunmadığını görmek için her zaman kütüphane belgelerini kontrol edin.
Tree shaking sonrasında kodum neden hâlâ büyük görünüyor?
Paketiniz büyük kalmaya devam ederse, kodunuzda bundler’ın bölümleri kaldırmasını engelleyen yan etkiler olabilir. Ek olarak, içe aktardığınız kütüphane tree shaking’e uygun olmayabilir. Ayrıca derleyicinizin kodunuzu, bundler’dan yapıyı gizleyen ve gerekli analizi gerçekleştirmesini engelleyen bir biçime dönüştürmediğini doğrulamalısınız.
Bundler olmadan tree shaking kullanabilir miyim?
Tree shaking, derleme aşamasında bundler’lar tarafından gerçekleştirilen bir süreçtir. Tarayıcılar artık ES modüllerini yerel olarak desteklese de, kodunuzu optimize etmek için tree shaking gerçekleştirmezler. Ölü kodun kaldırılmasından yararlanmak için, dağıtımdan önce bağımlılık grafiğinizi analiz etmek ve üretime hazır daha küçük bir dosya oluşturmak için Webpack, Rollup veya Vite gibi bir derleme aracı kullanmalısınız.
Bu bağlamda yan etkiler (side effects) nelerdir?
Yan etkiler, kod küresel window nesnesini değiştirmek veya mevcut prototiplere yöntemler eklemek gibi doğrudan kapsamının dışındaki mantığı yürüttüğünde ortaya çıkar. Bu eylemler uygulamanın durumunu değiştirdiğinden, bundler’lar bu kodu gerekli olarak görür ve tree shaking sırasında kaldırmaz. Kodunuzu package.json içinde yan etkilerden arınmış (side-effect-free) olarak beyan etmek, aracın daha iyi optimize etmesine yardımcı olur.
Okumaya devam edin: Web Tasarım ve Geliştirme · Web Tasarımı