Vad är Svelte och varför kompileras det?
Förstå Sveltes compiler-first-metod och hur den skiljer sig från React och Vue.
Vad är Svelte och varför kompileras det? är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Välkommen till Svelte
Svelte är ett kompilatorcentrerat UI-ramverk. Till skillnad från React och Vue gör Svelte det mesta av sitt arbete vid byggtid, inte vid körning.
Ingen virtuell DOM
React jämför en virtuell DOM vid körning. Svelte kompilerar i stället dina komponenter till mycket optimerad vanilla JavaScript som uppdaterar DOM direkt.
Mindre kod skickas
Eftersom Svelte skickar kompilerad output skickar du vanligtvis mindre JavaScript till webbläsaren. Paketstorlekarna blir mycket små.
Komponentfilens format
En Svelte-komponent finns i en .svelte-fil som innehåller tre valfria delar: script, markup och style.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Reaktivitet genom tilldelning
I Svelte utlöser en enkel tilldelning av ett nytt värde till en variabel en uppdatering av användargränssnittet. Det finns inget anrop till setState.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Komponenter i en fil
Markup, logik och begränsade formatmallar finns tillsammans i en fil. Denna samlokalisering gör komponenter enkla att förstå och refaktorera.
Begränsade formatmallar som standard
Alla <style>-block du skriver begränsas till den aktuella komponenten. Slut på CSS-konflikter mellan sidor.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Prestandavinster
Eftersom det inte finns någon overhead från ett ramverk vid körning tenderar Svelte-appar att vara snabbare än motsvarande React- eller Vue-appar på enklare enheter.
SvelteKit, meta-ramverket
SvelteKit bygger vidare på Svelte och lägger till routning, SSR och dataladdning. De flesta Svelte-appar i produktion använder SvelteKit.
När Svelte glänser
Svelte passar utmärkt för marknadsföringssidor, instrumentpaneler, mobilanpassade appar och alla situationer där paketstorlek och DX är viktiga.
Jämförelse i korthet
React, Vue och Angular skickar alla med ett runtime-paket; Svelte kompilerar bort det. Resultatet blir mindre paket och enklare mentala modeller.
Snabbtest
Testa dina kunskaper.
Sammanfattning
Du vet nu att Svelte kompilerar komponenter, skickar mindre JS, använder begränsade formatmallar och driver SvelteKit för kompletta appar. Nästa steg är att skapa ditt första projekt.
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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Vad är Svelte och varför kompileras det?” gratis?
Ja – hela texten till ”Vad är Svelte och varför kompileras det?” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Vad är Svelte och varför kompileras det?”?
Förstå Sveltes compiler-first-metod och hur den skiljer sig från React och Vue. Ni övar på Sveltejs 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 Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs 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 1 av 4.
Hur lång tid tar lektionen ”Vad är Svelte och varför kompileras det?”?
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 Sveltejs Academy-lektionen?
Ja. Varje Sveltejs 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
- Vad är Svelte och varför kompileras det?
- Skapa ett projekt med npm create svelte
- Projektstruktur: src routes static
- Utvecklingsservern och Hot Module Replacement