⚡Performance

Bundle Size reduzieren

Weniger JavaScript bedeutet schnellere Apps

Jedes Kilobyte JavaScript muss heruntergeladen, geparst und ausgefuehrt werden. Ein aufgeblaehtes Bundle macht deine App traege. Hier ist wie du es auf das Minimum reduzierst.

Pro-Tip — Der schnelle Weg
Ersetze grosse Libraries durch kleinere Alternativen. date-fns statt moment.js spart 200KB. lodash-es mit Tree Shaking statt dem kompletten lodash-Paket.
Seite 1
1

Bundle analysieren

Bevor du optimierst musst du wissen wo das Problem liegt. Der Bundle Analyzer zeigt dir jede Dependency als Rechteck, proportional zur Groesse.

ANALYZE=true npm run build


# Oder mit source-map-explorer
npx source-map-explorer .next/static/chunks/*.js
2

Tree Shaking nutzen

Importiere nur die Funktionen die du brauchst, nicht die ganze Library. ES Module Imports ermoeglichen Tree Shaking, CommonJS require nicht.

// Schlecht: importiert ALLES (70KB)
import _ from 'lodash';
_.debounce(fn, 300);


// Gut: importiert NUR debounce (2KB)
import debounce from 'lodash/debounce';
debounce(fn, 300);
3

Dynamic Imports

Lade schwere Komponenten erst wenn sie gebraucht werden. next/dynamic macht das in Next.js einfach.

import dynamic from 'next/dynamic';


const HeavyChart = dynamic(() => import('./HeavyChart'), {
 loading: () => <Skeleton />,
 ssr: false
});
4

Dependencies ausmisten

Pruefe regelmaessig welche Packages du wirklich brauchst. depcheck findet ungenutzte Dependencies automatisch.

npx depcheck


# Zeigt:
# Unused dependencies: moment, lodash
# Missing dependencies: ...
5

Server Components nutzen

In Next.js laufen Server Components auf dem Server und senden nur HTML zum Client. Kein JavaScript-Bundle fuer diese Komponenten. Nutze use client nur wenn noetig.

Seite 2
Warum das funktioniert
  • Kleinere Bundles laden schneller besonders auf Mobilgeraeten
  • Weniger JavaScript bedeutet weniger Parse- und Ausfuehrungszeit
  • Tree Shaking entfernt Code der nie aufgerufen wird
  • Dynamic Imports laden Code erst wenn er gebraucht wird
Tipps
  • bundlephobia.com zeigt die Groesse jedes npm-Packages vor der Installation
  • Ersetze moment.js durch date-fns oder dayjs
  • Icons einzeln importieren statt ganze Icon-Libraries
  • Bilder und Fonts sind kein JavaScript, aber trotzdem optimieren
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen