Tree-shaking och automatisk import
Namngivna exporter för tree-shaking, integrering med unplugin-vue-components och resolver-konfiguration.
Tree-shaking och automatisk import är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad är tree-shaking
Tree-shaking innebär eliminering av död kod: en bundlare tar bort exporter som konsumenten aldrig importerar. Ett välbyggt bibliotek gör att appar bara behöver ta med de komponenter de använder, vilket håller bundlarna små.
Namngivna exporter möjliggör tree-shaking
Använd namngivna exporter från er entry så att varje import kan analyseras statiskt. En enda default-export som innehåller allt, alltså ett barrel-objekt, kan inte tree-shakas.
// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";Undvik ett default-exporterat barrel-objekt
Om ni exporterar ett enda objekt med alla komponenter tvingas bundlare behålla dem alla, även om appen bara använder en.
// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };Konsumenten importerar det som behövs
Med namngivna exporter destrukturerar konsumenten endast de komponenter som används, och resten tas bort från bygget.
import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundledFältet sideEffects
Bundlare antar att moduler kan ha sidoeffekter och behåller dem. Om ni anger "sideEffects": false i package.json talar ni om att modulerna är rena och säkert kan tas bort.
{
"sideEffects": false
}Deklarera sidoeffekter för CSS
Om paketet innehåller CSS-importer som inte får tas bort ska ni ange dem, så att endast dessa bevaras.
{
"sideEffects": ["**/*.css"]
}Automatisk import för konsumenter
För att bespara konsumenterna manuella importer levererar bibliotek resolver för unplugin-vue-components, som automatiskt importerar komponenter som används i mallar.
npm install -D unplugin-vue-componentsTillhandahålla en resolver
En resolver är en funktion som, utifrån namnet på en använd komponent, returnerar varifrån den ska importeras. Leverera en sådan från ert paket.
// my-ui-lib/resolver.js
export function MyUiResolver() {
return {
type: "component",
resolve: (name) => {
if (name.startsWith("My")) {
return { name, from: "my-ui-lib" };
}
}
};
}Konsumentens konfiguration
Konsumenten registrerar pluginen med er resolver. Därefter importeras komponenter som används i mallar automatiskt och kan fortfarande tree-shakas.
// 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()] })
]
});Automatisk import och tree-shaking
Eftersom resolvern omvandlar användning i mallar till riktiga namngivna importer paketeras bara de komponenter som används – ni får både enkel användning och små bundlar.
Undvik global registrering
Ett bibliotek som automatiskt registrerar alla komponenter via app.use förstör tree-shaking. Föredra namngivna exporter och en valfri resolver, så att konsumenterna kan välja komponenter individuellt.
Snabb kontroll
Vilken inställning i package.json talar om för bundlare att era moduler säkert kan tas bort med tree-shaking?
Sammanfattning
Aktivera tree-shaking genom att använda namngivna exporter, aldrig ett default-exporterat barrel-objekt, och ange "sideEffects": false eller lista CSS-filerna. För enklare användning kan ni leverera en resolver för unplugin-vue-components, så att konsumenterna automatiskt importerar använda komponenter men fortfarande bara paketerar det de använder. Undvik också att tvinga fram global registrering.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Tree-shaking och automatisk import” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Tree-shaking och automatisk import”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Tree-shaking och automatisk import”?
Namngivna exporter för tree-shaking, integrering med unplugin-vue-components och resolver-konfiguration. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Tree-shaking och automatisk import”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Vite i library mode
- TypeScript-deklarationer för komponentbibliotek
- Tree-shaking och automatisk import
- Publicera till npm och använd Semantic Versioning