Frontend Academy · Lektion

Vite: plugin-system og SSR-tilstand

Skriv et Vite-plugin med transform- og load-hooks, integrér tredjepartsplugins, og konfigurér Vite til server-side rendering med ssrBuild-indstillingen.

Lektion 1 af 414 trin

Vite: plugin-system og SSR-tilstand er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor Vite vandt

Vite (fransk for 'hurtig') blev oprettet af Evan You. I udvikling leverer den kildefiler uden bundling via native ES-moduler — med øjeblikkelige koldstarter. I produktion bruges Rollup til bundling. Udvikleroplevelsen er markant hurtigere end Webpacks.

Sådan fungerer Vites udviklingsserver

Moderne browsere understøtter ES-moduler indbygget. Vite leverer dine kildefiler, som de er, og transformerer TypeScript/JSX efter behov. Ingen bundling betyder ingen ventetid ved koldstarter.

Udskiftning af moduler uden genindlæsning

HMR udskifter moduler uden at genindlæse siden. Vites HMR er bygget omkring ESM og er meget hurtigere end Webpacks. De fleste frameworks (React, Vue og Svelte) integrerer med det for opdateringer på komponentniveau, hvor tilstanden bevares.

Grundlæggende Vite-konfiguration

Konfigurer via vite.config.ts i projektets rodmappe.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

Pluginsystemet

Vite-plugins er en udvidelse af Rollup-plugins med ekstra hooks til udviklingsserveren. Et plugin er et objekt (eller en funktion, der returnerer et), som har navngivne hooks.

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

Vigtige hooks

transform(code, id): ændrer filindholdet (for eksempel kompilerer MDX og indsætter miljøvariabler). load(id): leverer indhold til virtuelle moduler. resolveId(source): tilpasser modulopløsning. configureServer(server): føjer middleware til udviklingsserveren.

Populære plugins

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (importerer SVG'er som komponenter). vite-plugin-checker (TypeScript / ESLint i overlay). vite-plugin-mkcert (lokal HTTPS).

Vites SSR-tilstand

Vite understøtter rendering på serversiden med lavniveau-primitiver. Frameworks som Nuxt, SvelteKit, Remix og Astro bygger ovenpå. Følg Vites SSR-vejledning ved brugerdefineret SSR.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

Bygning til SSR

To builds: klient og server. vite build --ssr entry-server.ts opretter serverbundlet.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

Miljøvariabler

import.meta.env.MODE er 'development' eller 'production'. Brugerdefinerede variabler med præfikset VITE_ eksponeres.

CSS-håndtering

Vite håndterer CSS, CSS Modules (foo.module.css), PostCSS (finder automatisk postcss.config.js) og CSS-forprocessorer (Sass, Less og Stylus) direkte fra start. Indsæt kritisk CSS via plugins.

Vite kontra Webpack kontra Turbopack

Vite: ESM-native udvikling, Rollup-builds og bredt økosystem. Webpack: gammel gigant, mere konfigurerbar og langsommere. Turbopack (Vercel): Rust-baseret, kompatibel med Webpack og følger i øjeblikket med Next. Til nye projekter: Vite til SPA'er, Next/Turbopack til Next-specifikke projekter.

Hurtigt tjek

Hvorfor starter Vites udviklingsserver ved koldstart så meget hurtigere end Webpacks?

Besvar den i den interaktive lektion

Opsummering: Vite

ESM-baseret udviklingsserver: øjeblikkelig koldstart og hurtig HMR. I produktion bruges Rollup. Plugins udvider Rollups hooks (transform, load og resolveId) samt Vite-specifikke hooks (configureServer og handleHotUpdate). SSR-tilstand via createServer + middlewareMode; byg med --ssr. Plugins til PWA, MDX, SVGR og mkcert. import.meta.env til miljøvariabler. CSS Modules, PostCSS og forprocessorer er indbygget.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Vite: plugin-system og SSR-tilstand” gratis?

Ja — hele teksten til “Vite: plugin-system og SSR-tilstand” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Vite: plugin-system og SSR-tilstand”?

Skriv et Vite-plugin med transform- og load-hooks, integrér tredjepartsplugins, og konfigurér Vite til server-side rendering med ssrBuild-indstillingen. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Vite: plugin-system og SSR-tilstand”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy