Ich versuche, von RequireJS zu Webpack zu migrieren, und ich bin mir nicht sicher, wie wir unsere Locale-Dateien am besten handhaben können.
Gegenwärtig erstellen wir eine separate JS-Datei für jedes Gebietsschema. Diese Dateien enthalten mehr als 7 Moduldefinitionen für i18n-Nachrichten sowie Bibliothekskonfigurationen (z. B. Moment). Zum Beispiel sieht unsere da_DK Datei so aus:
Zur Laufzeit ermitteln wir die entsprechende Sprachdatei, die mit dem Rest unserer App geladen werden soll. Unser App-Code hat keine Ahnung, welches Gebietsschema geladen ist. Alle Module, die von der Ländereinstellung abhängig sind, werden require('moment-locale') und require('messages') verwenden.
Ich möchte etwas ähnliches mit Webpack machen, aber ich habe noch keinen guten Weg gefunden, dies zu erreichen.
Ich habe require.context für dynamic benötigt, aber es hört sich so an, als würden alle möglichen Locales mit meiner App gebündelt werden, was ich lieber nicht machen würde.
Ich habe auch in das DllPlugin geschaut und gedacht, dass jede locale-Datei eine "dll" sein könnte, aber ich habe bemerkt, dass das dll-Manifest spezifische Modulnamen enthält (zB: node_modules / moment / locale / de-at.js) und ich denke ich Ich brauche das, um generischer zu sein, so dass webpack weiß, wenn ich require('moment-locale') habe, muss es in dieser DLL suchen.
Eine Möglichkeit, dies zum Laufen zu bringen, bestand darin, meinen Locale-Bundle-Generierungscode zu aktualisieren, damit er für jedes Gebietsschema einen Eintrag wie folgt erzeugt:
und dann habe ich in der Webpack-Konfiguration das Feld library auf einen Namespace für meine App gesetzt. Und dann habe ich in der Webpack-Konfiguration meiner App auf diese Module in externals verwiesen. Mit anderen Worten: Wenn "da_DK.js" geladen wird, werden alle Module in% code_% in einem Namespace platziert, auf den die Anwendung beim Laden verweist. Ich würde diesen Ansatz lieber nicht verwenden, aber es ist der einzige Weg, wie ich das bisher zum Laufen bringen konnte.
Gibt es einen anderen / besseren Weg, dies zu erreichen?
Es gibt mehrere Möglichkeiten, wie Sie das erreichen können. 3 mögliche Wege sind:
Packen Sie alle Gebietsschemas in Ihrem Bundle
Auf diese Weise handeln Sie eine höhere Bundle-Größe für eine weniger http-Anfrage. Wenn die Gebietsschemas klein sind, könnte dies der Weg sein, den Sie nehmen müssen. In allen anderen Fällen würde ich dagegen raten, da dies die Bündelgröße vergrößern und die Belastung erhöhen wird.
Lassen Sie Ihr Bundle das Gebietsschema lazy laden .
Nutzen Sie dazu die Funktion Webpacks Code-Aufteilung . Auf diese Weise können Sie eine bundle.js , eine da_DK.js , eine sv_SE.js usw. erstellen und require() / require.ensure verwenden, um eine der Gebietsschema-Dateien abhängig von der Logik in bundle.js zu laden.
Erstellen Sie einzelne Bundles für jedes Gebietsschema
Je nachdem, wie Sie die Locale-Aushandlung durchführen, ist es am besten, wenn Sie einzelne Pakete auf Build-Zeit erstellen. Mit anderen Worten: Erstellen eines bundle.da_DK.js a bundle.sv_SE.js und so weiter. Wenn Sie die Gebietsschema-Aushandlung basierend auf etwas durchführen, das vor dem Laden des Bundles verfügbar war (z. B. ein /da/ slug in der URL, eine Sitzungseinstellung usw.), könnte dies der richtige Weg sein.
Wenn Sie so vorgehen, a) Erstellen Sie das kleinstmögliche Bündel und b) Sie erhalten eine Leistungssteigerung (wenn auch klein), da keine Übersetzung benötigt wird. Das i18n-Plug-in für Webpack hilft Ihnen beim Erstellen einzelner Bundles.
Randnotiz
Moment.js, obwohl es eine wirklich gute Bibliothek ist, ist es nicht wirklich webpackfreundlich. Es lädt alle Ländereinstellungen. Werfen Sie einen Blick auf diesen Thread, um dieses Verhalten zu ändern: Ссылка
Ich versuche, von RequireJS zu Webpack zu migrieren, und ich bin mir nicht sicher, wie wir unsere Locale-Dateien am besten handhaben können.
Gegenwärtig erstellen wir eine separate JS-Datei für jedes Gebietsschema. Diese Dateien enthalten mehr als 7 Moduldefinitionen für i18n-Nachrichten sowie Bibliothekskonfigurationen (z. B. Moment). Zum Beispiel sieht unsere da_DK Datei so aus:
Zur Laufzeit ermitteln wir die entsprechende Sprachdatei, die mit dem Rest unserer App geladen werden soll. Unser App-Code hat keine Ahnung, welches Gebietsschema geladen ist. Alle Module, die von der Ländereinstellung abhängig sind, werden %code% und %code% verwenden.
Ich möchte etwas ähnliches mit Webpack machen, aber ich habe noch keinen guten Weg gefunden, dies zu erreichen.
Ich habe %code% für dynamic benötigt, aber es hört sich so an, als würden alle möglichen Locales mit meiner App gebündelt werden, was ich lieber nicht machen würde.
Ich habe auch in das DllPlugin geschaut und gedacht, dass jede locale-Datei eine "dll" sein könnte, aber ich habe bemerkt, dass das dll-Manifest spezifische Modulnamen enthält (zB: node_modules / moment / locale / de-at.js) und ich denke ich Ich brauche das, um generischer zu sein, so dass webpack weiß, wenn ich %code% habe, muss es in dieser DLL suchen.
Eine Möglichkeit, dies zum Laufen zu bringen, bestand darin, meinen Locale-Bundle-Generierungscode zu aktualisieren, damit er für jedes Gebietsschema einen Eintrag wie folgt erzeugt:
und dann habe ich in der Webpack-Konfiguration das Feld %code% auf einen Namespace für meine App gesetzt. Und dann habe ich in der Webpack-Konfiguration meiner App auf diese Module in %code% verwiesen. Mit anderen Worten: Wenn "da_DK.js" geladen wird, werden alle Module in% code_% in einem Namespace platziert, auf den die Anwendung beim Laden verweist. Ich würde diesen Ansatz lieber nicht verwenden, aber es ist der einzige Weg, wie ich das bisher zum Laufen bringen konnte.
Gibt es einen anderen / besseren Weg, dies zu erreichen?
Tags und Links webpack