Tree Shaking

Q: Tree shaking CommonJS ile çalışır mı?

Yalnızca kısmen. require() her yerde ve hesaplanmış adlarla çağrılabildiği için bundler'lar yalnızca basit kalıpları analiz edebilir; bu yüzden ES modülleri çok daha güvenilir sonuç verir.

Q: Tree shaking ile dead code elimination arasındaki fark nedir?

Dead code elimination, if (false) dalı gibi hiç çalışamayacak ya da sonucu hiç kullanılmayacak kodu kaldıran genel bir derleyici optimizasyonudur. Tree shaking aynı fikri modül düzeyinde uygular ve hiçbir şeyin import etmediği dışa aktarımların tamamını kaldırır.

Okunuşu: tri şeyking

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Tree shaking, hangi ES modül dışa aktarımlarının gerçekten import edildiğine bakarak hiç kullanılmayan kodu son paketten çıkaran bir derleme optimizasyonudur.

Tree shaking nedir?

Tree shaking, bundler'ların kullanılmayan kodu kullanıcılara gönderilen dosyaların dışında bırakmak için kullandığı bir tekniktir. Yüz fonksiyon dışa aktaran bir yardımcı kütüphaneden tek bir fonksiyon import ederseniz, tree shaking yalnızca o fonksiyonu ve bağımlı olduğu şeyleri tutar. Sonuç, daha küçük bir indirme ve tarayıcının ayrıştırıp çalıştırması gereken daha az JavaScript'tir.

ES modüllerinin statik yapısına dayanır: import ve export ifadeleri en üst düzeyde durur ve çalışma zamanında değişemez; bu yüzden bundler hangi dışa aktarımların kullanıldığını kodu çalıştırmadan çıkarabilir. Giriş noktasından erişilemeyen her şey atılır, ardından bir minifier fonksiyonların içinde kalan ölü kodu kaldırır. require() kullanan CommonJS modülleri dinamiktir ve sallanması (shake) çok daha zordur. İçe aktarıldığında global bir nesneyi değiştiren bir modül gibi yan etkisi olan kod güvenle kaldırılamaz; bu yüzden kütüphaneler, bundler'lara kullanılmayan dosyaların atlanabileceğini bildirmek için package.json içinde "sideEffects": false tanımlar.

İsim, kodunuzu bir ağaç olarak canlandırır: onu sallayın, hiçbir şeyin bağlı olmadığı ölü yapraklar düşer. Tree shaking, modern bundler'ların üretim derlemelerinde varsayılan olarak açıktır. Ondan en çok, bir kütüphane nesnesinin tamamı yerine import { debounce } from "./utils.js" gibi adlandırılmış fonksiyonları import ederek ve ES modülü olarak yayımlanmış kütüphaneleri tercih ederek yararlanırsınız.

Tree shaking çoğunlukla minification ve code splitting ile karıştırılır. Minification, boşlukları kaldırarak ve adları kısaltarak kalan kodu küçültür ama hangi modüllerin dahil edileceğine karar vermez. Code splitting hiçbir şeyi kaldırmaz; kullandığınız kodu isteğe bağlı yüklenen ayrı parçalara böler. Tree shaking ise kullanılmayan dışa aktarımların tamamını siler; üçü genellikle bir üretim derlemesinde birlikte çalışır.

Önemli noktalar

Tree shaking, hiç import edilmeyen dışa aktarımları son paketten çıkarır.
ES modüllerinin statik import ve export söz dizimine bağlıdır.
Yan etkiler kaldırmayı engelleyebilir; package.json'daki "sideEffects": false bundler'lara yardımcı olur.
En çok yararı görmek için yalnızca ihtiyacınız olan adlandırılmış fonksiyonları import edin.
Tree shaking kullanılmayan kodu kaldırır, minification kalanı küçültür, code splitting ise parçalara böler.

Örnek

Yalnızca import edilen dışa aktarım derlemede hayatta kalırjavascript

// utils.js exports three functions
export function formatDate(d) { return d.toISOString().slice(0, 10); }
export function formatPrice(n) { return "$" + n.toFixed(2); }
export function slugify(s) { return s.toLowerCase().replace(/\s+/g, "-"); }

// main.js imports only one of them
import { formatDate } from "./utils.js";
console.log(formatDate(new Date()));

// After a production build, formatPrice and slugify are gone:
// the bundle contains only formatDate and the code from main.js.

Sık sorulan sorular

Tree shaking neden çalışmıyor?

Yaygın nedenler yalnızca CommonJS olarak yayımlanmış bir kütüphane, bir kütüphanenin tamamını tek bir nesne olarak import etmek, kodun paketlemeden önce CommonJS'e transpile edilmesi veya bundler'ın tutmak zorunda olduğu yan etkili modüllerdir. Bir bundle analyzer, çıktıda gerçekte neyin kaldığını gösterir.

Tree shaking CommonJS ile çalışır mı?

Yalnızca kısmen. require() her yerde ve hesaplanmış adlarla çağrılabildiği için bundler'lar yalnızca basit kalıpları analiz edebilir; bu yüzden ES modülleri çok daha güvenilir sonuç verir.

Tree shaking ile dead code elimination arasındaki fark nedir?

Dead code elimination, if (false) dalı gibi hiç çalışamayacak ya da sonucu hiç kullanılmayacak kodu kaldıran genel bir derleyici optimizasyonudur. Tree shaking aynı fikri modül düzeyinde uygular ve hiçbir şeyin import etmediği dışa aktarımların tamamını kaldırır.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin