Vue Academy · Lekcja

Tree-shaking i automatyczny import

Eksporty nazwane na potrzeby tree-shakingu, integracja unplugin-vue-components oraz konfiguracja resolvera.

Tree-shaking i automatyczny import to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym jest tree-shaking

Tree-shaking to eliminowanie martwego kodu: bundler usuwa eksporty, których konsument nigdy nie importuje. Dobrze zbudowana biblioteka pozwala aplikacjom dołączać tylko używane komponenty, dzięki czemu bundle pozostają niewielkie.

Eksporty nazwane umożliwiają tree-shaking

Należy używać eksportów nazwanych w punkcie wejścia, aby każdy import można było przeanalizować statycznie. Pojedynczego eksportu domyślnego zawierającego wszystko (obiektu barrel) nie można poddać tree-shakingowi.

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

Unikaj domyślnego obiektu barrel

Eksportowanie jednego obiektu zawierającego wszystkie komponenty zmusza bundlery do zachowania ich wszystkich, nawet jeśli aplikacja używa tylko jednego.

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

Konsument importuje to, czego potrzebuje

Dzięki eksportom nazwanym konsument destrukturyzuje tylko używane komponenty, a pozostałe są usuwane z jego kompilacji.

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

Pole sideEffects

Bundlery zakładają, że moduły mogą mieć efekty uboczne, i zachowują je. Ustawienie "sideEffects": false w pliku package.json informuje je, że moduły są czyste i można je bezpiecznie usunąć.

{
  "sideEffects": false
}

Deklarowanie efektów ubocznych CSS

Jeśli pakiet zawiera importy CSS, których nie wolno usunąć, należy je wymienić, aby zachować tylko te pliki.

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

Automatyczny import po stronie konsumentów

Aby zwolnić konsumentów z konieczności ręcznego importowania, biblioteki dostarczają resolver dla unplugin-vue-components, który automatycznie importuje komponenty używane w szablonach.

npm install -D unplugin-vue-components

Udostępnianie resolvera

Resolver to funkcja, która na podstawie nazwy używanego komponentu zwraca miejsce, z którego należy go importować. Należy dostarczyć ją w pakiecie.

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

Konfiguracja konsumenta

Konsument rejestruje wtyczkę wraz z resolverem. Od tej chwili komponenty używane w szablonach są importowane automatycznie i nadal poddawane tree-shakingowi.

// 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()] })
  ]
});

Automatyczny import i tree-shaking

Ponieważ resolver przekształca użycie w szablonie w rzeczywiste importy nazwane, do bundla trafiają tylko używane komponenty — zachowuje się zarówno wygodę, jak i niewielki rozmiar bundli.

Unikanie rejestracji globalnej

Biblioteka, która automatycznie rejestruje wszystkie komponenty za pomocą app.use, uniemożliwia tree-shaking. Należy preferować eksporty nazwane i opcjonalny resolver, aby konsumenci mogli dołączać poszczególne komponenty według potrzeb.

Szybkie sprawdzenie

Jakie ustawienie w package.json informuje bundlery, że moduły można bezpiecznie poddać tree-shakingowi?

Podsumowanie

Tree-shaking można włączyć, używając eksportów nazwanych (nigdy domyślnego obiektu barrel) i ustawiając "sideEffects": false (lub wymieniając pliki CSS). Dla wygody należy dostarczyć resolver unplugin-vue-components, aby konsumenci mogli automatycznie importować używane komponenty, a mimo to dołączali tylko te, których używają — oraz unikać wymuszania rejestracji globalnej.

Często zadawane pytania

Czy lekcja „Tree-shaking i automatyczny import” jest bezpłatna?

Tak — pełny tekst „Tree-shaking i automatyczny import” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tree-shaking i automatyczny import”?

Eksporty nazwane na potrzeby tree-shakingu, integracja unplugin-vue-components oraz konfiguracja resolvera. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Tree-shaking i automatyczny import”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja trybu biblioteki Vite
Deklaracje TypeScript dla bibliotek komponentów
Tree-shaking i automatyczny import
Publikowanie w npm i wersjonowanie semantyczne

← Powrót do Vue Academy