Wie behandelt man Javascript & CSS-Dateien auf einer Website?

Question

Ich habe in letzter Zeit einige Gedanken darüber gehabt, wie man gemeinsam genutzte Javascript- und CSS-Dateien in einer Webanwendung verarbeitet.

In einer aktuellen Webanwendung, an der ich gerade arbeite, habe ich eine recht große Anzahl verschiedener Javascripts und CSS-Dateien erhalten, die in einem Ordner auf dem Server abgelegt werden. Einige der Dateien werden wiederverwendet, andere nicht.

In einer Produktionsstätte ist es ziemlich dumm, eine hohe Anzahl von HTTP-Anfragen und viele Kilobyte unnötigen Javascript und redundante 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 Sorgen, ein Bündel von Javascript-Dateien zu erstellen und sie manuell zu minimieren, wenn Sie es einmal tun würden, aber da die App kontinuierlich gepflegt wird und sich die Dinge ändern und entwickeln, wird es ziemlich schnell zum Problem manuell, während neue Updates, die Änderungen an Javascripts und/oder CSS-Dateien enthalten, in die Produktion verschoben werden.

Was ist ein guter Ansatz, um damit umzugehen? Wie gehen Sie in Ihrer Bewerbung damit um?

Answer 1

Worüber Sie sprechen, heißt minification.

Es gibt viele Bibliotheken und Helfer für verschiedene Plattformen und Sprachen, die dabei helfen. 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 auf Google-Code - minify.

Here ist ein Beispiel für einen .NET-Http-Handler, der all das im laufenden Betrieb erledigt.

Answer 2

CSS-Dateien können in logische Teile (wie häufig, Drucken, vs.) kategorisiert und partitioniert werden. 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, ich denke, Sie können dieses Problem auf der Serverseite lösen, mehrere Skriptdateien auf der Seite hinzugefügt, können Sie auch dynamisch die Skriptdatei Server Seite generieren, aber für clientseitige Zwischenspeicherung zu arbeiten, sollten diese Teile anders und statische Adressen.

Answer 3

Ich habe das gleiche Problem auf einer Website, die ich lanciere.

Ich habe kürzlich über ein Projekt namens SquishIt (siehe GitHub) herausgefunden. 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.

Mit SquishIt können Sie benannte "Bundles" von Dateien erstellen und diese kombinierten und reduzierten Dateibündel anschließend auf der gesamten Site rendern.

Answer 4

Ich schrieb vor einiger Zeit einen ASP.NET-Handler, der die rohen CSS- und Javascript-Quellcodedateien bei Bedarf kombiniert, komprimiert/minimiert, gzips und zwischenspeichert. Zu bringen, in drei CSS-Dateien, zum Beispiel, würde es so im Markup aussehen ...

<link rel="stylesheet" type="text/css" 
     href="/getcss.axd?files=main;theme2;contact" /> 

Der getcss.axd Handler liest in dem Query-String und legt fest, welche Dateien es in lesen muss und minify (In diesem Fall würde es 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 wird immer zuerst im Cache gesucht, sodass es bei nachfolgenden Anforderungen nicht erneut komprimiert werden muss.

Ich liebe diese Lösung, weil ...

• Es die Anzahl der Anfragen reduziert, so viel wie möglich
• keine weiteren Schritte für die Bereitstellung erforderlich sind
• Es ist sehr leicht zu pflegen ist

Einziger Nachteil ist, dass der ganze Style/Script-Code irgendwann im Serverspeicher gespeichert wird. Aber RAM ist heutzutage so billig, dass es nicht so groß ist wie früher.

Auch eine Sache, die erwähnenswert ist, stellen Sie sicher, dass der Abfrage-String nicht anfällig für schädliche Pfadmanipulation (nur erlaubt A-Z und 0-9).

Answer 5

Ich baute eine Bibliothek, Combres, die genau das tut, d. H. Minimieren, kombinieren usw. Es erkennt auch automatisch Änderungen an lokalen und Remote-JS/CSS-Dateien und die neuesten auf den Browser. Es ist kostenlos & Open-Source. Überprüfen Sie für eine Einführung in Combres.