Ich suche nach Hilfe bei der Verwendung von webpack für eine große AngularJS-Anwendung. Wir verwenden die Ordnerstruktur basierend auf dem Feature (jedes Feature / jede Seite hat ein Modul und sie haben Controller, Direktiven). Ich habe Webpack erfolgreich konfiguriert, um es mit Grunt arbeiten zu lassen, der ein einzelnes Bündel produziert. Ich möchte Chunks erstellen, da es eine große App wird, möchten wir Module (Seite / Feature) Artefakte asynchron laden.
Ich gehe einige Beispiele für das Webpack durch, um 'code splitting' mit require([deps],fn ) syntax zu verwenden. Allerdings konnte ich die Stücke nicht lazy-loaded bekommen. Zuerst, ich weiß nicht wo genau, ich würde diese Stücke importieren müssen, bevor AngularJS den Benutzer zur nächsten Seite leiten würde. Ich kämpfe um eine klare Trennung der Verantwortung.
Hat mich jemand auf eine Beispielanwendung von AngularJS hingewiesen, bei der Webpack zum asynchronen Laden von Controllern / Direktiven / Filtern nach jeder Route verwendet wird?
Wenige der Links, die ich befolge: Sollte ich Browserify verwenden oder Webpack zum verzögerten Laden von Abhängigkeiten in eckigen 1.x Ссылка Ссылка
Sagar Ganatra hat einen hilfreichen Blogbeitrag über den Code geschrieben Teilen.
Überraschenderweise wird Code-Aufteilung vom eckigen Modulsystem nicht wirklich unterstützt. Es gibt jedoch eine Möglichkeit, eine Codeaufspaltung zu erreichen, indem während der Konfigurationsphase ein Verweis auf die speziellen Provider von angular gespeichert wird.
%Vor%[...] wenn Angular die Anwendung, Funktionen - Controller, Service usw. initialisiert oder bootstrappt. sind auf der Modulinstanz verfügbar. Hier laden wir die Komponenten und die Funktionen sind zu einem späteren Zeitpunkt nicht verfügbar. Daher müssen wir die verschiedenen Provider-Funktionen verwenden und diese Komponenten registrieren. Die Provider sind nur in der config-Methode verfügbar. Daher müssen wir eine Referenz dieser Provider in der config-Funktion speichern, wenn die Anwendung initialisiert wird.
Nun schreiben Sie zum Beispiel in Ihre loginController
Definieren Sie Ihren neuen Controller langsam.
Wenn Sie auch Ihre Vorlagen lazern möchten, empfehle ich den ui-Router . Dort können Sie eine templateProvider angeben, die im Grunde eine Funktion zum Laden von Vorlagen async ist
Tags und Links javascript angularjs java webpack lazy-loading