0Pricing
Vue Academy · Ders

Ağaç Sarsma ve Otomatik İçe Aktarma

Ağaç sarsma için adlandırılmış dışa aktarmalar, unplugin-vue-components entegrasyonu ve çözücü yapılandırması.

Ağaç Sarsma ve Otomatik İçe Aktarma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Ağaç Budama Nedir

Ağaç budama, kullanılmayan kodun kaldırılmasıdır: bir paketleyici, kullanıcının hiç içe aktarmadığı dışa aktarımları atar. İyi oluşturulmuş bir kütüphane, uygulamaların yalnızca kullandıkları bileşenleri içermesini sağlayarak paketleri küçük tutar.

Adlandırılmış Dışa Aktarımlar Bunu Sağlar

Her içe aktarmanın statik olarak çözümlenebilmesi için giriş noktanızdan adlandırılmış dışa aktarımlar kullanın. Her şeyi tutan tek bir varsayılan dışa aktarma, yani varil nesnesi, ağaç budaması yapılamaz.

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

Varsayılan Varil Nesnesinden Kaçının

Tüm bileşenleri tek bir nesneyle dışa aktarmak, uygulama yalnızca birini kullansa bile paketleyicileri hepsini tutmaya zorlar.

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

Kullanıcı Uygulaması Gerekeni İçe Aktarır

Adlandırılmış dışa aktarımlarla kullanıcı uygulaması yalnızca kullandığı bileşenleri ayıklar ve geri kalanı kendi derlemesinden çıkarılır.

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

sideEffects Alanı

Paketleyiciler modüllerin yan etkileri olabileceğini varsayar ve onları tutar. "sideEffects": false ayarını package.json içine eklemek, modüllerinizin saf olduğunu ve güvenle budanabileceğini bildirir.

{
  "sideEffects": false
}

CSS Yan Etkilerini Bildirme

Paketinizde çıkarılmaması gereken CSS içe aktarımları varsa bunları listeleyin; böylece yalnızca bunlar korunur.

{
  "sideEffects": ["**/*.css"]
}

Kullanıcılar için Otomatik İçe Aktarma

Kullanıcıları elle içe aktarma yapmaktan kurtarmak için kütüphaneler, şablonlarda kullanılan bileşenleri otomatik olarak içe aktaran unplugin-vue-components için bir çözümleyici sunar.

npm install -D unplugin-vue-components

Çözümleyici Sağlama

Çözümleyici, kullanılan bir bileşen adını aldığında bu bileşenin nereden içe aktarılacağını döndüren bir işlevdir. Kendi paketinizden bir çözümleyici sunun.

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

Kullanıcı Yapılandırması

Kullanıcı uygulaması eklentiyi çözümleyicinizle kaydeder. Artık şablonlarda kullanılan bileşenler otomatik olarak içe aktarılır ve yine ağaç budamasına tabi tutulur.

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

Otomatik İçe Aktarma ve Ağaç Budama

Çözümleyici, şablon kullanımını gerçek adlandırılmış içe aktarmalara dönüştürdüğü için yalnızca kullanılan bileşenler paketlenir; böylece hem kullanım kolaylığını hem de küçük paketleri korursunuz.

Genel Kayıttan Kaçının

Tüm bileşenleri app.use üzerinden otomatik olarak kaydeden bir kütüphane, ağaç budamasını engeller. Adlandırılmış dışa aktarımları ve kullanıcıların bileşen bazında isteğe bağlı olarak etkinleştirebileceği bir çözümleyiciyi tercih edin.

Hızlı Kontrol

Hangi package.json ayarı paketleyicilere modüllerinizin güvenle ağaç budamasına tabi tutulabileceğini bildirir?

Özet

Adlandırılmış dışa aktarımlar kullanarak (asla varsayılan bir varil nesnesi kullanmadan) ve "sideEffects": false ayarını yaparak (veya CSS'yi listeleyerek) ağaç budamasını etkinleştirin. Kullanım kolaylığı için bir unplugin-vue-components çözümleyicisi sunun; böylece kullanıcılar kullanılan bileşenleri otomatik olarak içe aktarırken yalnızca kullandıklarını paketler. Genel kaydı zorunlu tutmaktan kaçının.

Sıkça Sorulan Sorular

“Ağaç Sarsma ve Otomatik İçe Aktarma” dersi ücretsiz mi?

Evet — “Ağaç Sarsma ve Otomatik İçe Aktarma” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Ağaç Sarsma ve Otomatik İçe Aktarma” dersinde ne öğreneceğim?

Ağaç sarsma için adlandırılmış dışa aktarmalar, unplugin-vue-components entegrasyonu ve çözücü yapılandırması. Vue 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.

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

Önceden deneyim gerekmez. CoddyKit'te Vue 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 3. dersidir.

“Ağaç Sarsma ve Otomatik İçe Aktarma” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

  1. Vite Kütüphane Modu Yapılandırması
  2. Bileşen Kütüphaneleri için TypeScript Bildirimleri
  3. Ağaç Sarsma ve Otomatik İçe Aktarma
  4. npm'ye Yayınlama ve Anlamsal Sürümleme
← Vue Academy Sayfasına Dön