Dateigröße Problem der Single Page Applikation mit React + Webpack

Question

Ich entwickle eine Single Page Applikation mit React + Redux + Webpack. Webpack ist ein großartiges Werkzeug, um alle Sachen zu verpacken, aber ich konnte einige pt meine Anwendung einfach eine übergeordnete Seite erstellen und sobald Benutzer die Funktion aus dem oberen Menü auswählen, wird bestimmte Funktion als neue Registerkarte innerhalb der Registerkarte Container und den Registerkarten gestartet selbst erfordern Interaktion. Sagen wir mal, wenn Tab A etwas vervollständigt, muss Tab B einen Teil der Information aktualisieren.

Meine ausgearbeitete Idee ist, dass jede Funktion eine BIG-Komponente von React ist und die übergeordnete Komponente steuert, welche Funktion (Komponente) an den Tab-Container angehängt werden soll. Aber ich stelle mir vor, die Probleme können kommen, wenn ich Webpack verwenden, um die gesamte Anwendung in 1 JS-Datei zu bündeln, die Größe der JS-Datei wäre sehr RIESIG, auch wenn ich das Lieferantenquellbündel in externe Ressourcen aufgeteilt habe ich glaube, es ist häufiges Problem für Single-Page-Anwendung mit Webpack und es sollte einen besseren Weg, um dies zu lösen.

Bitte korrigieren Sie mich freundlich, wenn etwas i + Missbrauch Reagieren Webpack

Answer 1

Wenn webpack kompiliert/Code im Produktionsmodus bündelt es wird viel kleiner sein als die Bündelgrößen Sie sehen zur Zeit. Auch wenn Sie betroffen sind, überprüfen Sie Preact (https://preactjs.com/), die API-kompatibel mit React ist, aber viel kleiner

Answer 2

Webpack unterstützt dynamische Importe, die zum Laden von Code bei Bedarf verwendet werden können, z. wenn eine oberste Registerkarte geöffnet wird. Auf diese Weise bleibt Ihr anfängliches js-Bundle klein und die Anwendung kann sehr schnell starten.

https://webpack.js.org/guides/code-splitting/#dynamic-imports