Zum Inhalt springen

JavaScript im Frontend richtig einbinden

Erstellt am 24. Juni 2008 · 18 Antworten · letzte Antwort am 6. Januar 2009

Tags: Frage

Enlightning Man ·

Hi,
sieht wie ein interessantes Projekt aus. Nach 2 Minuten angucken scheint es für meinen Geschmack aber etwas "sehr" automatisch. Müsste man mal ausprobieren wie man es mit Typo verbinden kann.

Habe aber selbst auch schon drüber nachgedacht, das Script oben so zu erweitern, dass man mehrere JS Dateien in eine einzige minimieren kann. Das sollte eigentlich funktionieren.

Für CSS wäre natürlich eine gute Erweiterung nur ist das ja meist schon eine Template Sache und müsste daher vermutlich mit Hilfe von TypoScript komprimiert werden.

Wäre aber sehr interessant, wenn es mal jemand mit Typo ausprobiert und seine Erfahrungen postet.

Grüße,
EM

Enlightning Man ·

Klar, die gibts, aber wenn man über

$GLOBALS['TSFE']->additionalHeaderData[$this->extKey] = '<script ....';

eigenes JS in einer eigenen Extension einbindet wird es nicht 'geminified'.

Vielleicht ist das auch der falsche Weg, aber mein Initialpost oben hat eigentlich genau das gefragt:

Geht es irgendwie automatisch aus der eigenen Extension heraus?

steffenk ·

am besten Du schaust Dir mal die tslib_pagegen an, dann verstehst Du besser wie was eingefügt wird.
InlineJS:
$GLOBALS['TSFE']->inlineJS[] = '...'
Scripts:
$GLOBALS['TSFE']->JSCode oder
$GLOBALS['TSFE']->additionalHeaderData

letzteres wird nicht minified, aber es ist ja an Dir bereits minified scripte in der extension abzulegen und die zu includen.

Enlightning Man ·

Ah cool, werd ich mir mal anschaun.

Ich finds immer wieder ein bisschen schwierig, solche Informatinen zu finden leider...

Also Danke für den Hinweis 🙂

mklappstuhl ·

Hallo,
also ich habe config.minifyJS = 1 grad mal ausprobiert und funktioniert jetzt nicht. Allerdings wird Attribut (wie man es auch nennen mag) vom t3editor nicht gehighlighted 😉
Ich vermute mal, wenn es funktionieren würde die Datei nur 'minified' würde.
Allerdings hätte man dann immer noch 2 Dateien (HTTP-Requests) und gzip nicht verwendet (was in den meisten Fällen Sinn macht), seh ich das richtig?
Ich möchte Niemandem Etwas vorwerfen aber wieso ist eine Solche, doch meist von positiven Auswirkungen begleitete Funktion nicht im Core enthalten?
(Könnte ja bei Bedarf per TS deaktiviert werden.) 😉

Grüße
Martin

Enlightning Man ·

Hi,

ich habs auch grad mal ausprobiert und muss sagen, dass ich es auch nicht hinbekommen habe.

@steffenk's post:

$GLOBALS['TSFE']->JSCode ist markiert als deprecated und man soll $GLOBALS['TSFE']->additionalJavaScript verwenden.

Mir ist es nicht gelungen, über $GLOBALS['TSFE']->inlineJS etwas zu produzieren, was später im Dokument auftaucht. Habe diese drei Varianten ausprobiert:

$GLOBALS['TSFE']->inlineJS[$this->extKey] = '
		
		/**
		 * Hier gibts viel Kommentare */
		function test() {
		
			/* Ich bin Kommentar */
			alert(1);
			
			
			
		}
		
		';
//dasselbe mit:
$GLOBALS['TSFE']->inlineJS[] = ...
$GLOBALS['TSFE']->inlineJS = ...

Wenn man obigen String in

$GLOBALS['TSFE']->additionalJavaScript[$this->extKey] = ...

einfügt, taucht es in script tags gewrapped im HEAD auf. Ist aber weit entfernt von einer minified Version... (Ich habe per Debugger überprüft, dass der Flag richtig gesetzt ist...)

Hab dann versucht rauszufinden, was das Problem ist und ein durchsuchen der kompletten t3lib und typo3 Ordner hat lediglich folgende sinnvolle Stelle in tslib_pagegen ergeben:

	// Should minify?
		if ($GLOBALS['TSFE']->config['config']['minifyJS']) {			
			$minifyErrorScript = $minifyErrorInline = '';
			$_scriptCode = t3lib_div::minifyJavaScript($_scriptCode,$minifyErrorScript);
			if ($minifyErrorScript) {
				$GLOBALS['TT']->setTSlogMessage($minifyErrorScript, 3);
			}
			if ($_inlineJS) {
				$_inlineJS = t3lib_div::minifyJavaScript($_inlineJS,$minifyErrorInline);
				if ($minifyErrorInline) {
					$GLOBALS['TT']->setTSlogMessage($minifyErrorInline, 3);
				}
			}
		}

Wie man sieht wird hier lediglich das inlineJS gepackt wo ich ncihts hineinbekommen habe.

Wie gehts denn nun??

@Tetramatrix: Händisch ist halt aufwendig und daher fehleranfällig. außerdem nervt es, wenn man größere Projekte hat und evtl. noch Leute, die sich nicht so gut auskennen, die daran aber arbeiten sollen. Ich hab das Script oben mittlerweile so erweitert, dass ich einen Debug flag für die lokale devel-Version setze bei der das nicht automatisch minified wird und den ich auf dem production server ausmachen kann. Alles woran man da noch denken muss is, den entsprechenden Cache bei einem update zu clearen aber das muss man ja eh immer tun.

Stoneage ·

(e.g. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate)

LOL! Zuerst wird das JS pseudo-komprimiert (whitespace/comments) und danach gezipped (gzip/deflate) werden???!!! Der Mehrnutzen dürfte minimal sein, wenn nicht sogar geringer ausfallen. Wenn Man/Frau Zeit hat!?

steffenk ·

mein Reden 😉

letzteres wird nicht minified, aber es ist ja an Dir bereits minified scripte in der extension abzulegen und die zu includen.

Enlightning Man ·

Ich nehm an die letzten beiden Posts gingen um was anderes ihr Threadhijacker, ja? 😃

steffenk schrieb

mein Reden 😉

letzteres wird nicht minified, aber es ist ja an Dir bereits minified scripte in der extension abzulegen und die zu includen.

Bitte korrigiert mich, wenn ich mich irre aber ich dachte der Sinn von Utility Funktionen ist es, dem Programmierer a) Arbeit abzunehmen, die er wiederholt ausführen muss und b) fehleranfällige Prozesse zu automatisieren.

Mein Script im ersten Post (welches wirklich nur ein 10-Zeiler ist) tut genau das. Dann hab ihr gesagt, dass es in Typo3 anders gemacht werden soll mittels des config flags. Meine Fragen bleiben also bestehen:

1) Wie bekommt man etwas in das inlineJS, sodass es der config Flag überhaupt beachtet wird?
2) Wieso wird er nicht beachtet, wenn man es als additionalJavaScript (man beachte den Unterschied zu additionalHeaderData) eingebunden wird?

Als Nebenbemerkung an alle, die den Thread hier evtl. mal lesen mögen weil sie sich ähnliche Fragen stellen: Man muss aufpassen, wenn man eine komplette JS Datei als "inlineJS" einbinden möchte, da der aktuelle Stand (Typo3 4.2.1) das Resultat des Minifyings on the fly generiert und somit jedesmal erstellt wenn die Seite generiert werden muss.

Enlightning Man ·

@just2b: schonmal interessanter Link, meine Fragen werden da leider aber auch nicht beantwortet.

Tetramatrix schrieb

Bisschen OT: Aber die Seite wird ja eh gecached. Ich kann mir nicht ganz vorstellen, dass die JS-Datei jedesmal minifiziert wird. #paralyzed#

Klar, da haste vollkommen recht... Setzt halt ordentliches Caching des jeweiligen Plugins voraus (was bei dynamischen Content evtl. problematisch ist).
Fakt ist doch, dass sich etwas wie Javascript im Vergleich zum Content der Seite relativ selten ändert. Wie gesagt, Prototype einbinden dauert ca 4 Sekunden auf meinem System für die Minifizierung. Ist ähnlich aufwendig wie die ganzen GIFBUILDER Bilder zu erzeugen. Da schafft Typo es ja, die sinnvoll zu cachen unabhängig davon, wie der Plugin programmiert ist. Mein Script hat versucht, diese Funktionalität für Javascript Files zu kopieren. Habe immernoch keine Antwort, wie das mit irgendwelchen unkommentierten Superflags gelöst werden könnte 😉

Enlightning Man ·

Mal als Nachtrag zu der eigentlichen Diskussion:

Tetramatrix schrieb

LOL! Zuerst wird das JS pseudo-komprimiert (whitespace/comments) und danach gezipped (gzip/deflate) werden???!!! Der Mehrnutzen dürfte minimal sein, wenn nicht sogar geringer ausfallen. Wenn Man/Frau Zeit hat!?

Hab es mal ausprobiert. Unsere Seite hat, dank des immens großen Prototype und Scriptaculous einen Javascript Footprint von kanpp 346KB. (Geht hier nicht um die Wahl der JS Bibliothek, ist nur Beispiel). Habe es mit JSMin und mod_deflate komprimiert und diese Tabelle erhalten:

Modus                 Größe     % von gesamt   Ersparnis relativ zu Vormethode
keine Komprimierung:  356 kb        100%         0 kb /  0%
JSmin, kein deflate:  272 kb         76%        84 kb / 24%
kein JSmin, deflate:   83 kb         23%       189 kb / 69%
JSmin und deflate:     66 kb         19%        17 kb / 20%

Insgesamt lässt sich der Footprint also auf 19 % der Initialgröße reduzieren und, wie zu erwarten, macht natürlich das mod_deflate den Löwenanteil aus. Nichtsdestotrotz, spart eine vorherige JSmin Komprimierung zumindest in unserem Falle nochmal 17kb, was immerhin einer Ersparnis von zusätzlichen 20% gegenüber der alleinigen deflate Komprimierung bedeutet.

Wenn ich die Wahl habe, meine Seite durch eine einzige Methode nochmal um 20% kleiner zu bekommen, bin ich durchaus ein Mann der dafür Zeit hat. Und der sie, da wir unseren läppischen Terrabyte Traffic im Monat mittlerweile erreichen, auch haben sollte.

Grüße,
Christopher