Frühere Projekte wurden mit Grunzen konstruiert und anschließend RequestJs verwendet, um modular zu machen. Der Beamte von RefordeJS bietet Grunzen-Plug-In für Komprimierung und Verschmelzung. Das aktuelle Projekt hat Gulp erreicht und verwendet SeaJs in Modularität, sodass ich natürlich auch an das Problem der Modulverführung und -komprimierung gedacht habe.
Als ich dieses Problem zum ersten Mal löste, war es nicht sehr glatt. Es gab kein besonders beliebtes Gulp-Plug-In für die Verschmelzung und Kompression von SeaJs auf NPM. Obwohl ich auch viele Probleme auf SeaJS Github gelesen habe, können die meisten von ihnen nur alle Moduldateien in eine Gesamtdatei zusammenführen. Dies ist definitiv kein Problem für einseitige Anwendungen. Bei mehrseitigen Anwendungen verstößt es jedoch offensichtlich gegen den Kern des On-Demand-Ladens in der Modularitätsidee. Ich möchte also eine Methode, die auf der Grundlage der Module, von denen jede Seite abhängt, auf dem Nachfragen verschmelzen.
Die Bedeutung dieser On-Demand-Verschmelzung ist, dass es einerseits nur die Module, von denen eine Seite abhängt, nur verschmilzt und andererseits auch einige Module herausfiltern, die nicht an der Zusammenführung teilnehmen. Der Grund dafür, dies zu betrachten, ist, dass einige Module wie JQuery alle abhängige Bibliotheken von Drittanbietern sind und möglicherweise eine große Datei haben. Das Wichtigste ist, dass Sie seinen Code kaum ändern. Wenn diese Module also nicht in die JS der Seite verschmolzen werden, hilft es, den Browser -Cache besser zu nutzen. In diesem Artikel wird eine einfache und praktikable Methode eingeführt, um SeaJs-Zusammenkünfte in kleinen und mittelgroßen Projekten durchzuführen, die auf Schluck basieren.
Hinweis: Um den Effekt von SeaJs-Zusammenführungen zu veranschaulichen, enthält dieser Artikel eine Demo Demo mit zwei Seiten: login.html und Regist.html, mit denen zwei unabhängige Dateien in mehrseitigen Anwendungen simulieren. Sie können es über den folgenden Link anzeigen:
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
Wenn Sie als Beispiel bei der Anzeige der Quelldatei dieser Seite an Login.html nehmen, werden Sie nicht nur auf SeaJs und zugehörige Konfigurationsdateien Common.js bezogen. Dieses App/Login -Modul entspricht tatsächlich JS/App/Login.js:
Tatsächlich stützt sich dieses Login.js jedoch auf weitere Module JS, und Sie können die detaillierten JS -Ressourcen über die Quelle von Chrome anzeigen:
Bevor die Login.js verschmelzen, sah der Code so aus:
In den ersten beiden Screenshots sahen wir jedoch nicht die drei Dateien: mod/mod1.js, mod/mod2.js, dEPs/fastclick.js. Zusätzlich zu Login.js haben wir auch lib/bootstrap.js, lib/jquery.js, lib/jquery.validate.js gesehen. Dies ist die Wirkung des Zusammenführens. Einerseits nehmen die Module unter dem Ordner js/lib nicht an der Fusion teil. Andererseits werden die anderen Module, auf die die Haupt -JS der Seite abhängt, in die Haupt -JS -Datei der Seite zusammengefasst.
Der mit dieser Demo bezogene Code kann über den folgenden Link angezeigt werden:
https://github.com/liuyunzhuge/blog/tree/master/seajs
1. Ideen zusammenführen
Tatsächlich ist die Methode relativ einfach, ich werde sie am Ende dazu bringen.
1) Lassen Sie mich zunächst über eine Ordnerstruktur sprechen, die ich das SeaJS -Modul organisiere, was so ist:
Diese Struktur wird von ReformenJs entlehnt und versucht, die Dateiorganisation zu verflachen, was für kleine und mittelgroße Front-End-Projekte nicht zu problematisch sein sollte. Die Funktionen jedes Ordners sind:
1) JS/App speichert die Haupt -JS jeder Seite, im Grunde die Logik einer Seite und eines JS
2) JS/DEPS speichert Module von Drittanbietern, die in Haupt-JS zusammengeführt werden müssen
3) JS/LIB speichert Module von Drittanbietern, die nicht an der Fusion teilnehmen müssen
4) JS/MOD speichert einige JS -Module, die in jedem Projekt selbst geschrieben wurden
5) Common.js ist die SeaJS -Konfigurationsdatei.
2) In gemeinsam.Js sind alle Module unter JS/LIB in der Alias -Option konfiguriert, da diese JS nicht am Zusammenschluss beteiligt sind und im Browser -Cache verwendet werden müssen. Alias kann uns erleichtern, die Ladeadressen dieser Dateien zu aktualisieren, wenn die Dateien unter JS/LIB geändert oder aktualisiert werden:
Basis ist im JS -Ordner konfiguriert. Wenn ich in der Modulentwicklung andere Module benötigen möchte, ist es meine Gewohnheit, Modul -Identifikatoren wie MOD/MOD1 direkt ohne relative Identifizierung zu schreiben. Auch wenn das Modul, dem das Modul definiert wird, im selben Ordner wie es existiert, ist dies auch der Grund, warum ich das Basisverzeichnis auf den JS -Ordner festgelegt habe, der dem Stammverzeichnis der Site ein wenig ähnlich ist.
3) Idee zusammenführen: Verwenden Sie hauptsächlich die beiden Gulp-Plugins: Gulp-Seajs-Transsport und Gulp-Seajs-Concat. Obwohl sie auf Github nicht sehr beliebt sind, haben sie mein Problem gut gelöst und sind sehr einfach zu verwenden:
(Weitere Inhalte müssen den Link Quellcode zu Beginn dieses Artikels überprüfen, um die relevante Datei gulpFile.js zu finden.)
Mit dem Gulp-SeaJS-Transport können Sie die SeaJS-Moduldateien von anonymen Modulen in benannte Module umwandeln. Beispielsweise sieht JS/MOD/MOD1.js vor dem Erstellen so aus:
Aber nach der Transportverarbeitung wird es:
Dies ist ein kritischerer Punkt in SeaJs Fusion -Arbeit. Es ist nicht so, als ob Anfordernjs, einfach direkt zu beschimpfen; Es muss zunächst durch eine Transportaufgabe verarbeitet werden, das anonyme Modul in ein benanntes Modul verwandeln und den zweiten Parameter von Define verwenden, um alle Abhängigkeiten dieses Moduls zu beschreiben, genau wie bei Anforderungen. Erst nach dem Abschluss des Transports kann für die Zusammenschlüsse verwendet werden. Aus Gründen finden Sie unter: https://github.com/seajs/seajs/issues/426.
Wenn Gulpseajs-Concat zusammengeführt wird, ist es sehr einfach. Sagen Sie ihm einfach eine Basisoption. Diese Basisoption steht im Einklang mit der Basisoption in JS/Common.js. Da Gulp-Seajs-Concat andere Moduldateien finden kann, hängt dies basierend auf den Modulen nach Basis und Transport ab.
4) Diese Methode sollte verwendet werden, wenn die Haupt -JS auf der Seite verwendet wird:
Der Parametername der Verwendung muss mit der Hauptmodul -ID der fusionierten Haupt -JS übereinstimmen. Zum Beispiel sieht es nach JS/App/Login.js zusammen, es sieht so aus:
Das erste definierte entsprechende Modul ist das Hauptmodul in der fusionierten Datei. Der Inhalt der roten Box ist die ID des Hauptmoduls. Wenn SeaJs das Modul verwenden, muss der Parametername mit dieser ID übereinstimmen. Andernfalls wird auch wenn SeaJs diese Datei erfolgreich geladen wird, keinen Code im Modul. Da SeaJS eine Regel hat: ID- und Pfad -Matching -Prinzip, das etwas damit zusammenhängt, dh: Wenn SeaJs mehrere Module in einer Datei enthalten, wird das Hauptmodul in dieser Datei gemäß dem Parameternamen der Verwendung gefunden. Nur wenn sie genau übereinstimmen, können sie gefunden werden.
5) Kompressionsverzerrung: Verwenden Sie Gulp-Uuglify:
Um dem Mangle zu achten, müssen Sie das Erfordernisse des Exportmoduls ausschließen, andernfalls verursacht dies einige unerwartete Probleme.
2. Zusammenfassung dieses Artikels
Obwohl der Inhalt dieses Artikels sehr einfach ist, dauerte es viel Zeit, um das Problem dieses Artikels zu lösen, als ich zum ersten Mal in Schluck und SeJs geschnitten habe. Obwohl der Fortschritt viel glatter war als meine Situation zu dieser Zeit, als ich mich auf die Demo vorbereitete ... egal was passiert, ich hoffe, der Inhalt dieses Artikels kann einigen Freunden mehr oder weniger helfen.