Tree-Shaking und automatische Importe
Benannte Exporte für Tree-Shaking, Integration von unplugin-vue-components und Resolver-Konfiguration
Tree-Shaking und automatische Importe ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Tree-Shaking
Tree-Shaking ist die Entfernung ungenutzten Codes: Ein Bundler entfernt Exporte, die der Verbraucher nie importiert. Eine gut erstellte Bibliothek ermöglicht es Apps, nur die verwendeten Komponenten einzubinden, sodass die Bundles klein bleiben.
Benannte Exporte ermöglichen Tree-Shaking
Verwenden Sie benannte Exporte aus Ihrem Einstiegspunkt, damit jeder Import statisch analysierbar ist. Ein einzelner Default-Export, der alles enthält (ein Barrel-Objekt), kann nicht durch Tree-Shaking entfernt werden.
// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";Ein Default-Barrel-Objekt vermeiden
Wenn Sie ein einzelnes Objekt mit allen Komponenten exportieren, müssen Bundler alle Komponenten behalten, selbst wenn die App nur eine davon verwendet.
// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };Verbraucher importieren, was sie benötigen
Bei benannten Exporten übernimmt der Verbraucher nur die verwendeten Komponenten per Destrukturierung; der Rest wird aus seinem Build entfernt.
import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundledDas sideEffects-Feld
Bundler gehen davon aus, dass Module Seiteneffekte haben können, und behalten sie deshalb. Mit "sideEffects": false in package.json teilen Sie ihnen mit, dass Ihre Module rein und sicher entfernbar sind.
{
"sideEffects": false
}CSS-Seiteneffekte deklarieren
Wenn Ihr Paket CSS-Importe enthält, die nicht entfernt werden dürfen, führen Sie diese auf, damit nur sie erhalten bleiben.
{
"sideEffects": ["**/*.css"]
}Auto-Import für Verbraucher
Um Verbrauchern manuelle Importe zu ersparen, liefern Bibliotheken einen Resolver für unplugin-vue-components aus, der in Templates verwendete Komponenten automatisch importiert.
npm install -D unplugin-vue-componentsEinen Resolver bereitstellen
Ein Resolver ist eine Funktion, die für den Namen einer verwendeten Komponente zurückgibt, woher sie importiert werden soll. Liefern Sie einen solchen Resolver aus Ihrem Paket aus.
// my-ui-lib/resolver.js
export function MyUiResolver() {
return {
type: "component",
resolve: (name) => {
if (name.startsWith("My")) {
return { name, from: "my-ui-lib" };
}
}
};
}Konfiguration des Verbrauchers
Der Verbraucher registriert das Plugin mit Ihrem Resolver. Nun werden in Templates verwendete Komponenten automatisch importiert und weiterhin durch Tree-Shaking entfernt, wenn sie nicht benötigt werden.
// 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()] })
]
});Auto-Import plus Tree-Shaking
Da der Resolver die Template-Verwendung in echte benannte Importe umwandelt, werden nur verwendete Komponenten gebündelt – Sie erhalten sowohl eine komfortable Nutzung als auch kleine Bundles.
Globale Registrierung vermeiden
Eine Bibliothek, die alle Komponenten über app.use automatisch registriert, verhindert Tree-Shaking. Bevorzugen Sie benannte Exporte und einen optionalen Resolver, damit Verbraucher jede Komponente einzeln aktivieren können.
Kurztest
Welche Einstellung in package.json teilt Bundlern mit, dass Ihre Module sicher durch Tree-Shaking entfernt werden können?
Zusammenfassung
Aktivieren Sie Tree-Shaking durch benannte Exporte (niemals ein Default-Barrel-Objekt) und setzen Sie "sideEffects": false (oder führen Sie CSS auf). Für eine komfortable Nutzung liefern Sie einen unplugin-vue-components-Resolver aus, damit Verbraucher verwendete Komponenten automatisch importieren und trotzdem nur das bündeln, was sie benötigen – und vermeiden Sie eine erzwungene globale Registrierung.
Häufig gestellte Fragen
Ist die Lektion „Tree-Shaking und automatische Importe“ kostenlos?
Ja — der vollständige Text von „Tree-Shaking und automatische Importe“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Tree-Shaking und automatische Importe“?
Benannte Exporte für Tree-Shaking, Integration von unplugin-vue-components und Resolver-Konfiguration Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Tree-Shaking und automatische Importe“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Vite-Konfiguration im Library-Modus
- TypeScript-Deklarationen für Komponentenbibliotheken
- Tree-Shaking und automatische Importe
- Veröffentlichung auf npm und semantische Versionierung