Frontend Academy · Ders

Paketleme Kavramları: ağaç sarsma kod bölme

Paketleme Kavramları: ağaç sarsma kod bölme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Paketleyici Ne Yapar

Paketleyici (Vite, webpack, Rollup, Parcel), kaynak dosyalarınızı okur, içe aktarmaları çözümler, kodu dönüştürür (aktarma, küçültme ve optimizasyon) ve tarayıcının verimli şekilde yükleyebileceği dosyalar üretir.

Modül Grafiği

Paketleyici bir giriş noktasından başlar ve bir modül grafiği oluşturmak için her içe aktarmayı izler. Bu grafik, uygulamanızın kullandığı tüm kodun eksiksiz bir haritasıdır. Tüm optimizasyonların temeli bu grafiktir.

Ağaç Budama — Kullanılmayan Kodun Elenmesi

Ağaç budama, modül grafiğini analiz eder ve hiçbir zaman içe aktarılmayan dışa aktarımları kaldırır. Yalnızca ES modülünün statik içe aktarmaları ağaç budamayı mümkün kılar; CommonJS require() dinamik olduğundan statik olarak analiz edilemez.

// utils.js
export const add = (a, b) => a + b;       // used → included
export const multiply = (a, b) => a * b;  // never imported → removed

// app.js
import { add } from './utils.js';
console.log(add(2, 3));

Yan Etkiler ve sideEffects: false

Kitaplığınızın yan etkisi yoksa (saf yeniden dışa aktarmalar), package.json dosyasına "sideEffects": false ekleyiniz. Bu, paketleyicilere içe aktarılmayan herhangi bir dosyanın paketinizden güvenle kaldırılabileceğini bildirir.

// package.json of a library:
{
  "sideEffects": false
  // or list files with side effects:
  "sideEffects": ["./src/polyfills.js"]
}

Kod Bölme

Kod bölme, paketi isteğe bağlı olarak yüklenen birden çok parçaya ayırır. Ana parça, ilk yüklemenin hızlı olması için küçük kalır. İkincil parçalar yalnızca gerektiğinde yüklenir (tembel rotalar ve özellik anahtarları).

Giriş Noktalarını Bölme

Çok sayfalı uygulamalarda, her biri kendi paketini üreten birden çok giriş noktası bulunur. Paylaşılan kod (örneğin React), otomatik olarak paylaşılan bir parçaya çıkarılır.

Dinamik İçe Aktarmayı Bölme

Her dinamik import() çağrısı bir bölme noktası oluşturur. Paketleyici, tembel yüklenen modül ve ona özgü tüm bağımlılıkları için ayrı bir parça üretir.

// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));

Tedarikçi Parçaları

Node_modules kodu nadiren değişir. Bu kodu uzun bir önbellek TTL'sine sahip bir tedarikçi parçasına çıkarınız. Tedarikçi parçasını önbelleğe almış kullanıcıların güncellemelerde yalnızca uygulama parçasını yeniden indirmesi yeterlidir.

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: { vendor: ['react', 'react-dom'] }
    }
  }
}

Küçültme

Küçültücüler (esbuild, terser), boşlukları kaldırır, değişkenleri tek harfli adlarla yeniden adlandırır ve başka küçültmeler uygular. Tipik bir React uygulaması, küçültme sonrasında boyutunun %60–70'ini kaybeder.

İçeriğe Dayalı Özetleme

Paketleyiciler, dosyanın içeriğinin özetini dosya adına ekler: index-a1b2c3.js. İçerik değiştiğinde özet ve dosya adı da değişir; tarayıcı yeni dosyayı getirir. Değişmeyen parçalar süresiz olarak önbelleğe alınır.

Kaynak Eşlemeleri

Kaynak eşlemeleri, küçültülmüş çıktıyı özgün kaynak kodunuza geri eşler. Ayrı olarak oluşturulur (kullanıcılara gönderilmez) ve hata ayıklama için DevTools tarafından kullanılır. build.sourcemap: true ile etkinleştiriniz.

Kısa Kontrol

Ağaç budamanın çalışması için birincil gereksinim nedir?

Özet: Paketleme Kavramları

Paketleyiciler modül grafiğini çözümler, kullanılmayan dışa aktarımları ağaç budamayla kaldırır (statik ESM gerekir), tembel yükleme için kodu parçalara böler, önbelleğe alma amacıyla tedarikçi kodunu çıkarır, çıktıyı küçültür ve önbellek yenileme için içeriğe dayalı özetler ekler. Kaynak eşlemeleri, küçültülmüş kodda hata ayıklamayı sağlar.

Sıkça Sorulan Sorular

“Paketleme Kavramları: ağaç sarsma kod bölme” dersi ücretsiz mi?

Evet — “Paketleme Kavramları: ağaç sarsma kod bölme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Paketleme Kavramları: ağaç sarsma kod bölme” dersinde ne öğreneceğim?

Paketleyicilerin ağaç sarsma yoluyla kullanılmayan dışa aktarımları nasıl kaldırdığını ve ilk sayfa yüklemelerini hızlandırmak için çıktıyı parçalara nasıl böldüğünü öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Paketleme Kavramları: ağaç sarsma kod bölme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

ES Modülleri: import export ve dinamik import
npm ve package.json: bağımlılıklar betikler
Vite: geliştirme sunucusu ve derleme
Paketleme Kavramları: ağaç sarsma kod bölme

← Frontend Academy Sayfasına Dön