Ich verwende die Codeaufteilungsfunktion von Webpack innerhalb von React. Ich erstelle eine App, bei der der Benutzer eine Option auswählt und die entsprechende React-Komponente rendern wird. Ich finde jedoch, dass die Verwendung der CommonJs require.ensure nur mit fest codierten Strings funktioniert. Wenn ich Variablen verwende, scheint es zu funktionieren, die Komponenten schalten aus. Aber wenn ich auf die Netzwerk-Registerkarte schaue, sehe ich, dass es den Code nicht teilt - es lädt keine neuen Pakete. Wo, wenn ich hart code, gibt es jedes Mal einen Anruf für ein neues Bündel.
Hier ist was funktioniert:
%Vor%Hier ist, was ich arbeiten möchte:
%Vor%Ich habe es endlich verstanden !! Ich habe das dynamische require in eine eigene Datei verschoben, also unten ist mein Aufruf dieser Datei von meiner reaktiven Komponente und dann der Inhalt der Datei. Sie benötigen dazu das Paketladeprogramm , das installiert ist.
Also mache ich den Aufruf und gebe this zusammen mit dem Namen der Komponente ein, die ich laden möchte.
Und die dynamicRequire.js-Datei, die unseren dynamischen Aufruf enthält, verwendet bundle-loader:
%Vor%Tags und Links reactjs webpack commonjs code-splitting