Ich bin neu bei Browserify und ich versuche herauszufinden, wie ich es effizienter machen kann, wenn es darum geht, wie viel der Client herunterladen muss.
Ich habe eine Web-App, die viele verschiedene Bibliotheken von Drittanbietern und benutzerdefinierten Code verwendet. Mit Browserify scheint es so zu sein, dass die allgemeine Herangehensweise darin besteht, alles in ein großes bundle.js zu verpacken. Dies scheint mir aus mehreren Gründen schrecklich ineffizient zu sein:
Nehmen wir an, Ihr bundle.js enthält lib1, lib2, lib3, customLib .
lib1 benötigt, muss der Client noch eine riesige bundle.js herunterladen und es werden nicht 75% davon verwendet. Verschwendet Bytes heruntergeladen. Unnötig erhöhte Seitenladezeit. customLib ein Stück Code ist, mit dem Sie häufig arbeiten, müssen Ihre Kunden jedes Mal, wenn sie sich ändert, bundle.js erneut herunterladen und wieder eine Tonne Bibliotheken von Drittanbietern herunterladen, die sich nicht geändert haben ... Andere Teile Ihrer Web-App verwenden möglicherweise lib2 und lib3 , aber der Client kann oder wird möglicherweise nie dorthin gehen, in dem er definitiv Bandbreite verschwendet, indem er die gesamte bundle.js herunterlädt.
Ich habe Vorschläge gesehen, wie Sie Ihr Paket in mehrere Pakete aufteilen können. Aber zu welchem Zweck? Wenn eine Seite lib1 verwendet, verwendet eine andere Seite lib1 und lib2 und eine andere Seite lib2 und lib3 , und wie teilt man sie auf? Je mehr Sie es in mehrere Bündel aufteilen, kommen Sie nicht von den Vorteilen von bundle.js weg?
Browserify scheint hoch angesehen zu sein, also hoffe ich, dass ich hier etwas verpasse. Was ist der richtige Ansatz, um viele Bibliotheken und benutzerdefinierte Skripte zusammen zu bündeln? Die Leute rufen einen Browsersuchlauf auf, aber jeder Skriptlader, den ich in der Vergangenheit gesehen habe (wie yepnope etc), benutzt Logik, um zu bestimmen, welche Skripte heruntergeladen werden sollen der Kunde alles herunterladen ...
Nicht sicher, ob die Antwort gut zum SO-Format passt. Aber trotzdem ...
Partitionierungsabschnitt des Handbuchs beschreibt 2 folgende Techniken
factor-bundle faktorisiert 2 oder mehr Einstiegspunkte, die gemeinsame Abhängigkeiten in einem einzigen Paket zusammenfassen.
Partitions-Bundle wie Faktor-Bundle, aber mit Laufzeit-Laden mit async loadjs -Funktion .
Faktorbündel
%Vor%Partitions-Bundle mit asynchronem Lade-Fallback
%Vor%Substack hat diesen Kern veröffentlicht, in dem erklärt wird, wie Bundles aufgeteilt werden. Er schlägt vor, factor-bundle wie folgt zu verwenden:
%Vor%Tags und Links javascript browserify dynamic-script-loading