Abo
  • Services:

Boxjs, Boxcss und Boxresizer

Javascript und CSS gepackt, komprimiert und minimiert

Boxjs soll die Bequemlichkeit beim modularen Laden von Javascript-Dateien mit der Geschwindigkeit einer einzelnen, komprimierten Javascript-Datei verbinden. Boxcss bietet Ähnliches für CSS und Boxreszier stellt einen Proxy zum Verkleinern von Bildern bereit.

Artikel veröffentlicht am ,
Boxjs, Boxcss und Boxresizer: Javascript und CSS gepackt, komprimiert und minimiert
(Bild: Boxjs)

Das Laden mehrerer Javascript-Dateien verlangsamt die Anzeige von Webseiten unnötig, da der Browser jede einzelne Datei holen muss. Schneller geht es, wenn Javascript-Code erst dann dynamisch nachgeladen wird, wenn er auch wirklich benötigt wird oder, sollte der Code von vornherein notwendig sein, wenn der gesamte Javascript-Code in eine einzelne Datei gepackt und diese minimiert und komprimiert wird. Das bietet sich vor allem bei mobilen Websites an, da hier die Latenzen höher sind und es spürbar länger dauert, mehrere kleine anstatt einer großen Datei zu laden. Das gilt nicht nur für Javascript, sondern auch für CSS und Bilder.

Stellenmarkt
  1. Bayerisches Landesamt für Steuern, Nürnberg (Home-Office möglich)
  2. über duerenhoff GmbH, Raum Sprockhövel

Für Entwickler ist der modulare Ansatz, jede Javascript-Datei einzeln einzubinden, einfacher und flexibler, denn kleine Änderungen können sofort getestet werden. Mit der rund 2 KByte großen Javascript-Bibliothek Boxjs soll diese Flexibilität erhalten bleiben, auch wenn nur eine einzelne minimierte und komprimierte Javascript-Datei ausgeliefert wird.

Einmal in die Seite eingebunden, werden dem Objekt Box die URLs der zu ladenden Javascript-Dateien übergeben. Boxjs holt dann die Dateien, minimiert und komprimiert diese und liefert sie in Form einer einzelnen gecachten Javascript-Datei aus. Dazu übergibt die Bibliothek die URLs an den Boxjs-Dienst, der die eigentliche Arbeit übernimmt.

Auch Coffeescript-Dateien lassen sich damit direkt in eine Website einbetten. Boxjs sorgt in diesem Fall dafür, dass der Coffescript-Code zuvor in Javascript umgewandelt wird. Über Optionen können Entwickler zudem festlegen, ob Dateien minifiziert werden. Auch kann festgelegt werden, dass die Javascript-Datei erst zu einem späteren Zeitpunkt geladen wird. Wer den Javascript-Code benötigt, bevor die Seite komplett geladen ist, kann zudem erzwingen, dass der Javascript-Code per document.write eingebunden wird. Für gewöhnlich hängt Boxjs einfach ein entsprechendes Script-Tag ans Ende der HTML-Datei.

Die Option "dev" sorgt dafür, dass die angegebenen Dateien direkt über einzelne Script-Tags in die Seite eingebunden werden. So können bei der Entwicklung auch lokale Javascript-Dateien berücksichtigt werden, die für den Boxjs-Dienst nicht erreichbar sind.

Boxcss für CSS

Was Boxjs für Javascript macht, übernimmt Boxcss für CSS-Dateien. Dabei wird einfach eine einzelne CSS-Datei von Boxcss.com eingebunden, der die zu verwendenden CSS-Dateien als URL-Parameter übergeben werden. Boxcss übernimmt auch hier den Rest und unterstützt dabei auch das CSS-Framework Less.

Wer auf das CDN von Boxjs beziehungsweise Boxcss nicht vertrauen will, kann die von Boxjs generierte Datei auch auf einem eigenen Server hinterlegen und manuell in eine Seite einbinden. Die Boxjs-Entwickler Marcel Du Preez und Simon Smith wollen hierfür in Zukunft aber eine elegantere Lösung bieten.

Boxresizer kümmert sich um Bilder

Boxresizer sorgt dafür, dass keine unnötig großen Bilder vom Server geladen werden müssen. Gedacht ist dies für adaptives Webdesign, das sich der jeweiligen Displaygröße anpasst. Boxresizer stellt dazu einen Proxy zur Verfügung, dem die URL des Originalbildes sowie die gewünschte Bildgröße als URL-Parameter übergeben werden. Boxresizer liefert dann eine entsprechend verkleinerte Version des Bildes an das Endgerät aus.

Allerdings unterstützt Boxresizer derzeit keinerlei Caching, so dass sich Entwickler darum selbst kümmern müssen.



Anzeige
Spiele-Angebote
  1. 399,99€ mit Vorbesteller-Preisgarantie
  2. 54,99€ mit Vorbesteller-Preisgarantie
  3. 14,99€ + 1,99€ Versand oder Abholung im Markt

Kaiser Ming 18. Jul 2011

erstmal wie Ka... javascript designt ist was denke ich darin liegt dass man von...

GodsBoss 18. Jul 2011

Die gzip-Kompression ist mindestens seit HTTP/1.1 im Standard enthalten, das sind zwölf...

GodsBoss 18. Jul 2011

Es steht doch außer Frage, dass es für Entwickler vieeeel zu kompliziert ist: 1. Mehrere...


Folgen Sie uns
       


Fünf smarte Lautsprecher von 200 bis 400 Euro im Vergleich

Link 300 und Link 500 von JBL, Onkyos P3, Panasonics GA10 sowie Apples Homepod treten in unserem Klangvergleich gegeneinander an. Die beiden JBL-Lautsprecher lassen die Konkurrenz blass aussehen, selbst der gar nicht schlecht klingende Homepod hat dann das Nachsehen.

Fünf smarte Lautsprecher von 200 bis 400 Euro im Vergleich Video aufrufen
Esa: Sonnensystemforschung ohne Plutonium
Esa
Sonnensystemforschung ohne Plutonium

Forscher der Esa arbeiten an Radioisotopenbatterien, die ohne das knappe und aufwendig herzustellende Plutonium-238 auskommen. Stattdessen soll Americium-241 aus abgebrannten Brennstäben von Kernkraftwerken zum Einsatz kommen. Ein erster Prototyp ist bereits fertig.
Von Frank Wunderlich-Pfeiffer

  1. Raumfahrt Die Digitalisierung des Weltraums
  2. Raumfahrt Mann überprüft mit Rakete, ob die Erde eine Scheibe ist
  3. Raumfahrt Falsch abgebogen wegen Eingabefehler

Hasskommentare: Wie würde es im Netz aussehen, wenn es uns nicht gäbe?
Hasskommentare
"Wie würde es im Netz aussehen, wenn es uns nicht gäbe?"

Hannes Ley hat vor rund anderthalb Jahren die Online-Initiative #ichbinhier gegründet. Die Facebook-Gruppe schreibt Erwiderungen auf Hasskommentare und hat mittlerweile knapp 40.000 Mitglieder. Im Interview mit Golem.de erklärt Ley, wie er die Idee aus dem Netz in die echte Welt bringen will.
Ein Interview von Jennifer Fraczek

  1. Nutzungsrechte Einbetten von Fotos muss nicht verhindert werden
  2. Bundesnetzagentur UKW-Abschaltung abgewendet
  3. Drupalgeddon 2 115.000 Webseiten mit Drupallücken übernommen

Always Connected PCs im Test: Das kann Windows 10 on Snapdragon
Always Connected PCs im Test
Das kann Windows 10 on Snapdragon

Noch keine Konkurrenz für x86-Notebooks: Die Convertibles mit Snapdragon-Chip und Windows 10 on ARM sind flott, haben LTE integriert und eine extrem lange Akkulaufzeit. Der App- und der Treiber-Support ist im Alltag teils ein Manko, aber nur eins der bisherigen Geräte überzeugt uns.
Ein Test von Marc Sauter und Oliver Nickel

  1. Qualcomm "Wir entwickeln dediziertes Silizium für Laptops"
  2. Windows 10 on ARM Microsoft plant 64-Bit-Support ab Mai 2018
  3. Always Connected PCs Vielversprechender Windows-RT-Nachfolger mit Fragezeichen

    •  /