Skip to main content

🧩 eigens MinifyCssChunk

MODX 3: CSS-Chunks automatisch minifizieren

Diese Anleitung zeigt, wie du in MODX 3 deine CSS-Chunks wie z.B. tmpBS_meinStyle und tmpBS_DarkFixes automatisch komprimierst, bevor sie im <head> geladen werden.

Damit entfernst du:

  • Kommentare
  • unnötige Leerzeichen
  • Zeilenumbrüche

und bekommst kleineren, schnelleren HTML-Output.

✅ Schritt 1: Snippet „MinifyCssChunk“ anlegen

Ort: Elemente → Snippets → Neu
Name: MinifyCssChunk

Code:

<?php
$chunkName = $modx->getOption('chunk', $scriptProperties, '');
if ($chunkName === '') {
    return '';
}

$css = $modx->getChunk($chunkName);
if ($css === '' || $css === null) {
    return '';
}

$css = preg_replace('!/\*.*?\*/!s', '', $css);
$css = preg_replace('/\n\s*\n/', "\n", $css);
$css = str_replace(["\r", "\n", "\t"], '', $css);
$css = preg_replace('/\s*([{};,])\s*/', '$1', $css);
$css = preg_replace('/\s+/', ' ', $css);
$css = preg_replace('/;}/', '}', $css);

return trim($css);

Eigenschaften:

  • sicher
  • stabil
  • kein Dateizugriff
  • funktioniert perfekt mit MODX 3
  • erzeugte Ausgabe wird von MODX gecached

✅ Schritt 2: CSS-Chunks minifiziert einbinden

Ersetze im Template:

<style>[[$tmpBS_meinStyle]]</style>
<style>[[$tmpBS_DarkFixes]]</style>

durch:

<style>[[MinifyCssChunk? &chunk=`tmpBS_meinStyle`]]</style>
<style>[[MinifyCssChunk? &chunk=`tmpBS_DarkFixes`]]</style>

Wichtig:

  • Kein ! verwenden → Snippet läuft cached
  • minifizierte CSS wird einmal generiert und dann aus dem Seiten-Cache ausgeliefert

✅ Schritt 3: Cache-Hinweis

Wenn du später CSS in den Chunks änderst:

  • Beim Speichern des Chunks leert MODX 3 automatisch den Cache (sofern „Cache leeren“ aktiviert ist).
  • Dadurch wird der minifizierte CSS-Output beim nächsten Seitenaufruf automatisch neu erzeugt.

🎉 Fertig

Ab sofort werden deine CSS-Chunks automatisch minimiert und schneller ausgeliefert – ohne Plugins und ohne Build-Tools.

Back to top