Vite: utvecklingsserver och build
Starta ett Vite-projekt, använd dess utvecklingsserver med omedelbar HMR, kör build-kommandot och förhandsvisa produktionsutdata.
Vite: utvecklingsserver och build är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 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 Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är Vite?
Vite är ett frontend-verktyg för nästa generations byggen, skapat av Evan You (skaparen av Vue). Det tillhandahåller en extremt snabb utvecklingsserver med native ESM och esbuild, samt ett produktionsbygge som drivs av Rollup.
Skapa ett Vite-projekt
npm create vite@latest skapar grundstrukturen för ett nytt projekt. Välj ramverk (Vanilla, React, Vue, Svelte, Preact, Lit) och variant (JS eller TS). Projektet är klart direkt – ingen konfiguration behövs.
npm create vite@latest my-app
# Choose: React + TypeScript
cd my-app
npm install
npm run dev # dev server on localhost:5173Utvecklingsservern – startar direkt
Vite bundlar inte under utveckling. Det serverar varje fil som en native ESM-modul. Webbläsaren importerar dem direkt. Ingen bundling innebär en kallstart på under 100 ms oavsett projektets storlek. Endast ändrade filer kompileras om vid HMR.
HMR – Hot Module Replacement
Vites HMR ersätter endast den ändrade modulen i den körande appen utan att läsa om hela sidan. För React med @vitejs/plugin-react bevaras komponentens tillstånd under HMR. Ändringar visas på under 50 ms.
vite.config.js / vite.config.ts
Vite konfigureras med en vite.config.ts-fil. Vanliga alternativ är plugins, resolve-aliaser, serverport, proxy för API-anrop och katalog för byggutdata.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: { '@': '/src' },
},
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
});Miljövariabler
Vite exponerar miljövariabler med prefixet VITE_ via import.meta.env. Lagra dem i .env, .env.development och .env.production. Prefixa aldrig hemligheter med VITE_ – de inkluderas i webbläsarbundlen.
# .env
VITE_API_URL=https://api.example.com
# In code:
const apiUrl = import.meta.env.VITE_API_URL;npm run build – produktionsbygge
npm run build anropar Rollup internt för att bundla, minifiera och tree-shaka appen. Resultatet placeras i mappen dist/, redo för distribution.
npm run build
# Output:
# dist/
# index.html
# assets/
# index-a1b2c3.js (minified app bundle)
# vendor-d4e5f6.js (node_modules chunk)
# index-7h8i9j.cssAnalysera bundlen
Använd vite-bundle-visualizer eller rollup-plugin-visualizer för att generera en treemap över bundlens innehåll. Det hjälper er att identifiera överdimensionerade beroenden och möjligheter till lazy loading.
npm run preview
npm run preview serverar produktionsbygget dist/ lokalt. Använd det för att verifiera produktionsbygget före distribution – det fångar problem som endast uppstår när appen inte körs i utvecklingsläge.
Koddelning i Vite
Dynamiska import()-satser skapar automatiskt separata chunks. React Routers lazy routes och Vues defineAsyncComponent utlöser också koddelning. Kontrollera chunkstorlekarna i byggutdata.
Vite för bibliotek
Vites biblioteksläge (build.lib) bygger npm-bibliotek och matar ut både ESM- och CJS-format. Ange en lista över externa beroenden för att förhindra att peer dependencies som React inkluderas i bundlen.
Snabbkontroll
Varför är Vites utvecklingsserver snabbare än webpacks?
Sammanfattning: Vite
npm create vite@latest skapar grundstrukturen direkt. Utvecklingsservern använder native ESM – ingen bundling och omedelbar HMR. vite.config.ts används för plugins, alias och proxy. Prefixet VITE_ används för miljövariabler som är säkra i webbläsaren. npm run build skapar en optimerad Rollup-bundle. npm run preview testar produktionsbygget lokalt.
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 ”Vite: utvecklingsserver och build” gratis?
Ja – hela texten till ”Vite: utvecklingsserver och build” 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 Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Vite: utvecklingsserver och build”?
Starta ett Vite-projekt, använd dess utvecklingsserver med omedelbar HMR, kör build-kommandot och förhandsvisa produktionsutdata. Ni övar på Frontend 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 Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend 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 ”Vite: utvecklingsserver och build”?
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 Frontend Academy-lektionen?
Ja. Varje Frontend 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
- ES-moduler: import export och dynamisk import
- npm och package.json: dependencies scripts
- Vite: utvecklingsserver och build
- Bundlingkoncept: tree shaking och code splitting