Wie funktioniert Webpack Code-Splitting

Question

Ich weiß ein wenig über Webpack, kann aber keine einfache Antwort auf meine Frage finden. Was bedeutet Code-Splitting mit Webpack?

Erstellt einzelne js-Paketdateien für verschiedene Routen und führt Ajax-Operationen zum Abrufen dieser js-Dateien durch, wenn sie vom Client angefordert werden.

Oder führt es Async-Aufrufe zum Abrufen anderer individueller js-Dateien vom Server aus, nachdem die erste angeforderte Seite nach dem ersten Treffer richtig angezeigt wurde?

Bevor ich lerne, hätte ich gerne eine Vorstellung davon, was ich lerne. Webpack-Dokumente helfen überhaupt nicht. Es setzt voraus, dass Sie vollständig verstehen, wie das Webpack funktioniert.

Answer 1

Code-Aufteilung teilt Ihre App in mehrere gebündelte js. Wenn Sie zum Beispiel einen Admin-Bereich für Ihre App haben, den Ihre Benutzer nie sehen werden, können Sie ihn in 2 Bundles aufteilen. Auf diese Weise können Benutzer die Admin-bezogene js nicht herunterladen.

Das tatsächliche Laden von gebündelten js erfolgt durch script-Tag-Injektion.

Wenn das tatsächliche Laden durchgeführt werden soll, wird vom Router behandelt. Wenn Sie react-router verwenden, ist dies eine schnelle example.

Hoffe das hilft etwas.