Warum Webpack verwenden?

Verwenden Sie mehr JavaScript

Mehr Benutzeroberflächen, die über moderne Browser bereitgestellt werden

Seiten werden mit so wenigen Aktualisierungen der gesamten Seite wie möglich bereitgestellt

Die Website verfügt nun über eine Es läuft viel Code auf dem Client! Eine riesige Codebasis muss auf geordnete Weise verwaltet werden, und das Modulsystem „Modulsystem“ bietet die Möglichkeit, die Codebasis in Module „Modul“

Fraktionen des Modulsystems Es gibt mehrere Standards zum Definieren von Modulen und Modulabhängigkeiten

verwendet das Modulsystem nicht.

CommonJS

AMD

ES6-Modulsystem

Es gibt andere...

Skript-Tag

Dieser Ansatz verwendet kein Modulsystem

Jedes Modul exportiert eine Schnittstelle zum globalen Objekt „zum Beispiel Fensterobjekt“. Andere Module greifen über das globale Objekt auf diese Schnittstelle zu. Nachteile:

Verursacht leicht Konflikte

Es muss große Aufmerksamkeit auf die Reihenfolge des Modulladens gelegt werden

Modulbenutzer müssen Modulabhängigkeiten zerlegen

In großen Projekten gibt es viele Module, die verwaltet werden müssen, und die Verwaltung ist sehr schwierig

CommonJS: synchrone Require-Methode

Diese Methode verwendet die synchrone Require-Methode, um eine Abhängigkeit zu laden Modul und gibt eine Schnittstelle zurück. Sie können das Exportobjekt des Moduls definieren, indem Sie Attribute zum Exportobjekt „exports“ hinzufügen oder module.exports einen Wert zuweisen.

Dieser Ansatz wird normalerweise mit serverseitigem NodeJS verwendet. Vorteile

Es kann serverseitigen Code nutzen.

npm verwendet bereits viele Module Dieser Stil

Sehr praktisch und einfach zu verwenden

Nachteile

Die blockierende Lademethode ist nicht für Netzwerkumgebungen geeignet und Netzwerkanforderungen sind asynchron

Wann Laden mehrerer Module, kein paralleles Laden

AMD: Die asynchrone Require-Methode wird in anderen Browser-Umgebungsmodulsystemen verwendet. Sie unterstützt kein synchrones Require, bietet aber eine asynchrone Require-Methode:

Vorteile Einhaltung der asynchronen Anforderungsmethode in der Netzwerkumgebung

Mehrere Module können parallel geladen werden

Nachteile

Zusätzlicher Codierungsaufwand. Schlechte Lesbarkeit

Ein bisschen wie eine vorübergehende Lösung

Implementierung: RequireJS

ES6-Modulsystem

ECMAScript 2015 „6. Version“, denn JavaScript bietet etwas Sprache Strukturen, um ein weiteres Modulsystem zu bilden

Vorteile Einfacher für die statische Analyse

Zukunftsorientierte ES-Standards

Nachteile

Es wird dauern Es wird einige Zeit dauern, bis Browser diese Funktion unterstützen.

Es gibt immer noch relativ wenige Module, die auf diese Weise geschrieben wurden.

Objektive Lösung.

Lassen Sie Entwickler ein Modulsystem auswählen, das vorhandenen Codebasen ermöglicht auch dann laufen, wenn sie ein anderes Modulsystem verwenden.

Übertragung

Das Modul muss vom Server zum Client übertragen werden, bevor es vom Client ausgeführt werden kann. Es gibt zwei extreme Übertragungsmethoden, die beide weit verbreitet sind, aber keine ist optimal

Ein Modul fordert gleichzeitig an

Alle Module fragen gleichzeitig an

Eine Anfrage für ein Modul

Vorteile: Es werden nur die erforderlichen Module übertragen

Nachteile: Übermäßiger Anforderungsaufwand

Nachteile: Die Anforderungsverzögerung ist groß, was zu Problemen führt das Programm startet langsam

Anforderung aller Module auf einmal

Vorteile: geringerer Anforderungsaufwand und weniger Verzögerung

Nachteile: Nicht verwendete Module werden ebenfalls auf den Client heruntergeladen

Fragmentierte Übertragung

In den meisten Szenarien ist eine flexiblere Methode erforderlich. Die Übertragungsmethode liegt zwischen den beiden oben genannten Extremfälle:

Zerlegen Sie beim Kompilieren aller Module eine Reihe von Modulen in eine Reihe kleiner Fragmente „Chunk“

relativ zu einer Anfrage. Für alle Module wandelt der Sharding-Ansatz Netzwerkanfragen in mehrere um kleinere, schnellere Anfragen. Beim Programmstart werden nicht benötigte Fragmente bei Bedarf nachgeladen.

Im Vergleich zum Anfordern eines Moduls nach dem anderen beschleunigt dies die Initialisierung des Programms, ermöglicht Ihnen aber dennoch, während der tatsächlichen Verwendung mehr Code abzurufen und „den Netzwerkanforderungs-Overhead zu reduzieren“.

Wie und wo Sharding durchgeführt wird, entscheidet der Entwickler. Auf diese Weise können große Codebasen organisiert werden.

Fazit

In Bezug auf die beiden oben genannten Hauptthemen unterstützt Webpack mehrere Modulsystemstile und unterstützt die flexible Chunk-Übertragung „Code Split“.

Webpack ist ein JS-Modul-Paketierungstool, das zum Packen der JS-Codebibliothek einer Website oder einer Codebibliothek eines Drittanbieters verwendet werden kann. Im Gegensatz zu RequireJs, das nur AMD unterstützt, ist NodeJS CommonJS, SeaJS unterstützt nur CMD und jetzt gibt es auch ES6-Module ... Webpack ist wie ein All-in-One-Gerät, und Entwickler können flexibel nach ihren eigenen Vorlieben programmieren.