Moderne Websites bestehen aus vielen Bausteinen: eigener Code für Menü, Formulare und Warenkorb, dazu Bibliotheken von Drittanbietern. Damit der Browser nicht Dutzende einzelner Dateien anfordern muss, fasst ein sogenannter Bundler sie vor der Veröffentlichung zusammen. Das Ergebnis heißt Bundle. webpack beschreibt sich selbst als statischen Modul-Bundler: Ausgehend von einem oder mehreren Einstiegspunkten baut er einen Abhängigkeitsgraphen und kombiniert jedes Modul, das das Projekt braucht, zu einem oder mehreren Bundles. Das sind statische Dateien, die der Server ausliefert [1]. Ohne weitere Einstellung schreibt webpack das Haupt-Bundle nach ./dist/main.js [1].
Warum die Größe zählt
Ein Bundle muss geladen, geparst, kompiliert und ausgeführt werden, bevor die Seite reagiert. Große JavaScript-Pakete bremsen eine Website laut web.dev deutlich, weil diese Arbeit den Hauptthread des Browsers blockiert und Eingaben warten müssen [2]. Weniger JavaScript beim Start verbessert nach web.dev die Werte für INP, die Reaktionszeit auf Eingaben. Bei Seiten, die ihren Inhalt erst im Browser aufbauen, kann sich auch der Zeitpunkt verzögern, an dem das größte Element sichtbar wird [2].
Ungünstig ist ein einziges Bundle für die ganze Website. Wer die Startseite aufruft, lädt dann auch den Code für den Checkout, das Kundenkonto und den Produktkonfigurator mit, obwohl er ihn nie braucht.
Bundles aufteilen
Die Gegenmaßnahme heißt Code-Splitting. Das Bundle wird in kleinere Stücke geteilt, sodass beim Start nur der nötige Code lädt und der Rest erst bei Bedarf folgt, etwa wenn jemand ein Formular abschickt [2]. Technisch geschieht das über dynamische Importe mit import(), die webpack, Parcel und Rollup unterstützen [2]. Als einfachen Einstieg nennt web.dev das Teilen nach Seiten oder Komponenten. Bibliotheken von Drittanbietern lassen sich mit dem SplitChunksPlugin von webpack in ein eigenes Bundle legen, das der Browser gut zwischenspeichern kann [2]. Minifizierung und Komprimierung verkleinern jedes einzelne Bundle zusätzlich.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Was Google beim Bundle beachtet
Google verarbeitet JavaScript-Seiten in drei Schritten: Crawling, Rendering und Indexierung [3]. Zwei Hinweise aus Googles Grundlagen betreffen Bundles direkt. Der Googlebot speichert Dateien offensiv im Cache und kann dabei Caching-Header ignorieren, sodass er womöglich ein veraltetes Bundle verwendet. Google empfiehlt deshalb einen Inhalts-Fingerabdruck im Dateinamen, etwa main.2bb85551.js, der sich bei jeder Änderung ändert [3]. Und JavaScript aus Dateien, die per robots.txt gesperrt sind, rendert Google nicht [3]. Ein gesperrter Ordner mit Bundles kann also dazu führen, dass Google Inhalte nicht sieht. Wie Google die Seite zusammensetzt, erklärt der Eintrag JavaScript-Rendering, Grundlagen zur Sprache stehen unter JavaScript.
Wie eine JavaScript-Website insgesamt für Google aufgestellt sein sollte, beschreibt der Ratgeber JavaScript-SEO Grundlagen. Um Frameworks wie React oder Vue geht es im Ratgeber JavaScript-Frameworks und SEO.
Wenn du wissen willst, wie viel JavaScript deine Startseite beim ersten Aufruf lädt und ob sich das Aufteilen lohnt, sprechen wir in der gratis Sprechstunde darüber.
- Organisation Concepts. webpack. Stand laufend. abgerufen am 31.10.2026
- Organisation Reduce JavaScript payloads with code splitting. web.dev (Google). Stand 05.11.2018. abgerufen am 31.10.2026
- Organisation Grundlagen von JavaScript-SEO. Google Search Central. Stand 04.03.2026. abgerufen am 31.10.2026
Häufige Fragen
Was macht ein Bundler?
Er sucht ausgehend von Einstiegspunkten alle Module zusammen, die eine Anwendung braucht, und schreibt sie in eine oder wenige Dateien. Bekannte Bundler sind webpack, Rollup und Parcel.
Ist ein großes Bundle schlecht für SEO?
Es kann die Ladezeit und die Reaktion auf Eingaben verschlechtern, weil der Browser den Code laden und ausführen muss. Das wirkt sich auf die Core Web Vitals aus.
Was ist Code-Splitting?
Das Aufteilen eines Bundles in kleinere Teile. Beim Start lädt nur der nötige Code, der Rest folgt bei Bedarf über dynamische Importe.
Warum soll der Dateiname einen Fingerabdruck enthalten?
Der Googlebot speichert Dateien offensiv im Cache und kann Caching-Header ignorieren. Ein Dateiname, der sich mit dem Inhalt ändert, sorgt dafür, dass Google die neue Fassung lädt.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
