Typo3 Komprimierung NGINX

M4ND0 · 2024-06-10T08:24:57+00:00

Hallo, ich bin leider kein Server-Techniker und habe bisher auch noch nie mit NGINX gearbeitet und hoffe hier ein wenig Hilfe zu diesem Thema zu finden. Ich...

M4ND0

Welche Tools nutzt Ihr dafür? Grunt, Gulp, Vite ... bzw. wie geht Ihr da mit Typo3 genau vor? Lasst Ihr Euch lokal dann eine komprimierte zusammengefasste CSS erstellen und diese wird dann einfach im TypoScript hinterlegt - oder gibt es da auch noch extra Einstellungen, welche beim Server vorgenommen werden müssen, damit dies mit dem Coaching korrekt funktioniert?

Markus Hofmann

M4ND0
Wie ich weiter oben schon geschrieben hatte, bevorzuge ich Minifizierung und Komprimierung in der Pipeline. Welches Tool du dafür verwendest, ist dir überlassen. Die genannten eignen sich alle dafür.
Im TypoScript hinterlege ich schon lange kein CSS mehr, ich regele das alles über die Templates selbst mittels der <f:asset.script> und <f:asset.css>, welche ich in den Templates entweder in der <f:section name="HeaderAssets"/> bzw. <f:section name="FooterAssets"/> einbinde. Brauche ich mehrere Templates für unterschiedliche Seiten, lagere ich die assets in ein Partial aus, welches ich dann in die Template sections rendere.
Die Sections werden in Templates automatisch gerendert und korrekt eingebunden. Das Ganze funktioniert seit TYPO3 8.6: https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/8.6/Feature-79409-AutorenderAssetSectionsInFluidTemplateWithController.html

pno

Ganz früher Gulp, in meinem letzten Job SGC (https://www.sgalinski.de/typo3-produkte-webentwicklung/sgc-cli-task-runner) (war anfangs auch gulp-basiert, später selbst geschrieben), inzwischen hab ich ein etwas anderes Setup das direkt cssnano u.ä. auf der CLI anstößt. Ich nutze dafür einen eigenen Task-Runner (in Kürze auch OpenSource), aber im Prinzip kann man das auch einfach per NPM-Scripts regeln. Da führen auf jeden Fall viele Wege nach Rom :-)

Ich erstelle dann in der Regel ein JS und ein CSS file das per TypoScript in site_package geladen wird. Das ist dann quasi die single source of truth. Die Asset-ViewHelper mag ich persönlich nicht so gerne an der Stelle, weil ich lieber einen zentralen Einstiegspunkt habe und gerade das Laden von JS dann lieber im JS selbst über imports regel. Sind aber beides valide Wege imho.

M4ND0

Ich werde mir Gulp noch mal genauer ansehen und damit ein wenig herumtesten, die Komprimierung somit darüber laufen lassen und Typo3 hier außen vor lassen. Vielen Dank für
den ganzen Input derweil.

M4ND0

Habe nun mal mit GULP ein wenig herumexperimentiert und versucht eine min.css.gz Datei zu erstellen - dies im TypoScript hinterlegt und die NGINX Directive dahingehend angepasst

// Add mime-type for compressed css files.
location ~ .css.gzip {
// gzip off and add_header only, if you gzip in Pipeline or by TYPO3 compression
add_header Content-Encoding gzip;
gzip off;
types {
text/css gzip;
}
}

Leider sieht dann bei der Ausgabe die CSS Datei in der Vorschau dann so aus

Der Antwortender spuckt auch keine Komprimierung aus, wenn ich das richtig sehe.

Hatte jmd. schon mal so ein "Problem" und weiß evtl. Rat?

Vielen Dank

Markus Hofmann

M4ND0 Deine nginx-Direktive bezieht sich auf *gzip files, du hast aber angegeben, dass du *gz als Dateiendung nutzt.
Und im TypoScript wird nur das *min.css hinterlegt

M4ND0

Stimmt, meine Directive sieht auch eigentlich (noch) so aus

// Add mime-type for compressed css files.
location ~ .css.gz {
// gzip off and add_header only, if you gzip in Pipeline or by TYPO3 compression
add_header Content-Encoding gzip;
gzip off;
types {
text/css gzip;
}
}

und zum Verständnis, ich concat und gzip mit GULP, da erstellt er das *.gz ja automatisch, muss ich diese Datei dann sozusagen noch umbenennen oder lass ich das GZIP doch weg?

Markus Hofmann

M4ND0 Wie bindest du das CSS im TYPO3 ein? Weil das sieht an sich erst einmal gut aus, wenn auch ich das gzip nicht zwingend über gulp machen würde, aber solang es funktioniert, geschenkt.

M4ND0

Stupiderweise so

css

includeCSS {
main = EXT:nw_template/Resources/Public/Css/main.css.gz
}

Markus Hofmann

M4ND0 AFAIK wird nicht das *.gz, sondern das css-File eingebunden. Der Server selbst kümmert sich darum, das gz auszuliefern, wenn vorhanden.

M4ND0

Somit bräuchte ich dann immer zwei Dateien, eine ohne .gz und eine mit .gz? Hinterlegt wird im TypoScript aber nur die .css?

Markus Hofmann

M4ND0 Das ist korrekt. Und das ist auch okay so.

M4ND0

Darf ich fragen, wie Du das Ganze bei einem Typo3 und einer lokalen DDEV Umgebung löst?

Nutzt Du GitHub oder andere Anbieter
lieber NGINX oder APACHE
wie löst Du das mit dem Deployment bzw. dem Bereitstellen auf den Server

Vielleicht bekomme ich ein paar neue Ansätze für meine täglichen Arbeiten

Markus Hofmann

M4ND0 lokal ddev mit nginx, Server ist abhängig vom Projekt, ich bevorzuge nginx.
Meine Firma arbeitet mit gitlab self-hosted, private Projekte hab ich auf gitlab.com und alle auf nginx.
Ich kompiliere alle assets im deployment und gzippe das auch in der Pipeline und liefere die Artefakte dann komplett auf den Server aus.

« Vorherige Seite

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS