Ich habe kürzlich darüber nachgedacht, wie man gemeinsam genutzte Javascript- und CSS-Dateien in einer Webanwendung handhaben kann.
In einer aktuellen Webanwendung, an der ich gerade arbeite, habe ich ziemlich viele verschiedene Javascripte und CSS-Dateien bekommen, die in einem Ordner auf dem Server abgelegt sind. Einige der Dateien werden wiederverwendet, andere nicht.
In einer Produktionsstätte ist es ziemlich dumm, eine hohe Anzahl von HTTP-Anfragen und viele Kilobytes unnötigen Javascript und redundanten CSS geladen zu haben. Die Lösung dazu ist natürlich, eine große gebündelte Datei pro Seite zu erstellen, die nur die notwendigen Informationen enthält, die dann minimiert und komprimiert (GZIP) an den Client gesendet wird.
Es gibt keine Probleme, ein Paket von Javascript-Dateien zu erstellen und sie manuell zu minimieren, wenn Sie es einmal tun würden. Aber da die App ständig gepflegt wird und sich Dinge ändern und entwickeln, wird es ziemlich schnell zu einem Problem, dies manuell zu tun während neue Updates, die Änderungen an Javascripts und / oder CSS-Dateien zur Produktion bringen, herausgeschoben werden.
Was ist ein guter Ansatz, um damit umzugehen? Wie gehst du damit in deiner Bewerbung um?
Worüber Sie sprechen, heißt Verkleinerung .
Es gibt viele Bibliotheken und Helfer für verschiedene Plattformen und Sprachen, die dabei helfen können. Da du nicht gepostet hast, was du benutzt, kann ich dich nicht auf etwas hinweisen, das für dich selbst relevanter ist.
Hier ist ein Projekt im Google-Code - minify .
Hier ist ein Beispiel für einen .NET Http-Handler macht all das spontan.
Ich habe eine Bibliothek gebaut, Combres , die genau das tut, dh minimieren, kombinieren usw. Es erkennt auch automatisch Änderungen an beiden lokal und Remote-JS / CSS-Dateien und drücken Sie die neueste auf den Browser. Es ist kostenlos & amp; Open Source. Schauen Sie sich diesen Artikel für eine Einführung in Combres an.
Ich beschäftige mich genau mit dem gleichen Problem auf einer Website, die ich lanciere.
Ich habe kürzlich von einem Projekt mit dem Namen SquishIt (siehe GitHub ). Es ist für das Asp.net-Framework gebaut. Wenn Sie nicht asp.net verwenden, können Sie immer noch über die Prinzipien hinter dem, was er hier tut, lernen.
SquishIt ermöglicht es Ihnen, benannte "Bundles" von Dateien zu erstellen und diese kombinierten und reduzierten Dateibündel anschließend auf der gesamten Site zu rendern.
CSS-Dateien können kategorisiert und in logische Teile partitioniert werden (wie gewöhnlich, Drucken, vs.). Anschließend können Sie die CSS-Importfunktion verwenden, um die CSS-Dateien erfolgreich zu laden. Die Wiederverwendung dieser kleinen Dateien ermöglicht auch das clientseitige Caching. Wenn es um Javascript geht, können Sie dieses Problem serverseitig lösen, mehrere Skriptdateien auf der Seite hinzufügen, Sie können auch dynamisch die Skriptdateiserverseite generieren, aber damit das clientseitige Caching funktioniert, sollten diese Teile anders und statisch sein Adressen.
Ich habe vor einiger Zeit einen ASP.NET-Handler geschrieben, der die Roh-CSS- und Javascript-Quellcodedateien bei Bedarf kombiniert, komprimiert / verkleinert, gzips und zwischenspeichert. Um zum Beispiel drei CSS-Dateien einzubinden, würde es im Markup so aussehen ...
%Vor%Der getcss.axd-Handler liest die Abfragezeichenfolge ein und bestimmt, welche Dateien er einlesen und minimieren muss (in diesem Fall würde er nach Dateien namens main.css, theme2.css und contact.css suchen). Wenn es fertig ist, die Datei einzulesen und zu komprimieren, speichert sie die große minimierte Zeichenfolge für einige Stunden im Server-seitigen Cache (RAM). Es sucht immer zuerst im Cache, sodass es bei nachfolgenden Anforderungen nicht erneut komprimiert werden muss.
Ich liebe diese Lösung, weil ...
Einziger Nachteil ist, dass der gesamte Style / Script-Code irgendwann im Serverspeicher gespeichert wird. Aber RAM ist heutzutage so billig, dass es nicht mehr so groß ist wie früher.
Beachten Sie auch, dass die Abfragezeichenfolge nicht anfällig für schädliche Pfadmanipulationen ist (nur A-Z und 0-9 zulassen).
Tags und Links javascript css static-files development-environment production-environment