Frontend Academy · Lektion

Code splitting och lazy routes

Använd dynamic import() för att dela upp bundlen vid ruttgränser, lazy-ladda React- och Vue-komponenter och övervaka chunk-storlekar i build-utdata.

Lektion 4 av 413 steg

Code splitting och lazy routes är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 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.

Varför dela upp kod?

Ett monolitiskt JavaScript-paket tvingar varje besökare att ladda ner varje kodrad i appen — även funktioner som de aldrig använder. Koduppdelning delar upp paketet i delar som läses in vid behov.

Dynamisk import()

import('./module') returnerar ett Promise som löser sig till modulen. Bundlers (Vite, webpack) upptäcker detta och skapar en separat del som laddas vid körning.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — komponentbaserad koduppdelning

React.lazy(() => import('./Heavy')) skapar en komponent som bara laddar sin kod när den renderas första gången. Omslut den med <Suspense> för att visa en reservvy medan den laddas.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

Ruttbaserad koduppdelning i React Router

Varje rutt får sin egen del — användarna laddar bara ner kod för de sidor de besöker.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Asynkrona komponenter i Vue 3

Vue erbjuder defineAsyncComponent för samma mönster.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Lazy-rutter i Vue Router

Vue Router stöder dynamiska importer i rutdefinitioner — delar skapas per rutt.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Webpacks magic comments

Ge ledtrådar om delarnas namn och förinläsningsbeteende genom webpacks 'magic comments' i importsatsen.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Prefetch kontra preload

prefetch: ladda ner delen under ledig tid inför sannolika nästa navigeringar. preload: ladda ner nu med hög prioritet för den aktuella rutten kritiska delar. Använd prefetch när en länk hovras över och preload för kända, nära förestående behov.

Paketanalys

Använd rollup-plugin-visualizer (Vite) eller webpack-bundle-analyzer för att visualisera delarnas storlek. Leta efter för stora delar, duplicerade beroenden och bibliotek som ni har glömt att tree-shaka.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Uppdelning av vendor-delar

Dela upp tredjepartsbibliotek i en separat vendor-del som ändras mer sällan än appens kod — webbläsare kan behålla den i cache mellan driftsättningar.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

När ska ni INTE dela upp?

Mycket små delar (under 20 KB) gör mer skada än nytta — HTTP-kostnaden överstiger besparingen från paketet. Dela inte upp varje komponent; dela vid ruttgränser och runt funktioner som faktiskt är tunga.

Snabbkontroll

Vad behöver Reacts lazy()-omslutning kombineras med för att renderas korrekt?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Koduppdelning

Dynamisk import() skapar separata delar. React.lazy och Suspense används för komponentbaserad uppdelning. Använd lazy-komponenter för rutter i React Router och Vue Router. Använd prefetch för sannolika nästa delar och preload för kritiska delar. En paketanalysator visar onödig kod. Dela upp leverantörsbibliotek för bättre cachelagring. Undvik mikrodela på under 20 KB.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Code splitting och lazy routes” gratis?

Ja – hela texten till ”Code splitting och lazy routes” 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 ”Code splitting och lazy routes”?

Använd dynamic import() för att dela upp bundlen vid ruttgränser, lazy-ladda React- och Vue-komponenter och övervaka chunk-storlekar i build-utdata. 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 4 av 4.

Hur lång tid tar lektionen ”Code splitting och lazy routes”?

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

Core Web Vitals: LCP FID CLS
Lighthouse-granskningar och poängsättning
Bildoptimering: lazy loading och formatet WebP
Code splitting och lazy routes

← Tillbaka till Frontend Academy