JavaScript in Contao zusammenfassen

Je weniger Dateien für eine Seite geladen werden müssen, umso kürzer wird die Ladezeit.Die JavaScript-Dateien teilen sich in ein Hauptskript im Header der Seite, weitere JavaScript-Dateien aus jQuery-Templates und einer JavaScript-Datei aus der Layouteinstellung Eigener JavaScript-Code. Alle diese Dateien können zu einer einzigen Datei zusammengefasst werden.

Dafür kopieren wir jedes verwendete jQuery- oder MooTools-Template unter Layout › Templates › Neues Template in das Templates-Verzeichnis. Danach editieren wir das jeweilige Template und ersetzen den Aufruf für die JavaScript-Datei.

moo_slimbox.html5

<script src=“<?php echo TL_ASSETS_URL; ?>assets/mootools/slimbox/<?php echo SLIMBOX; ?>/js/slimbox.js“></script>

ersetzen durch:
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/mootools/slimbox/'.SLIMBOX.'/js/slimbox.js|static';?>

moo_mediabox.html5

<script src=“<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js“></script>

ersetzen durch:
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/mootools/mediabox/'.MEDIABOX.'/js/mediabox.js|static';?>

j_mediaelement.html5

<script src=“<?php echo TL_ASSETS_URL; ?>assets/jquery/mediaelement/<?php echo MEDIAELEMENT; ?>/js/mediaelement-and-player.min.js“></script>

ersetzen durch:
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/mediaelement/'.MEDIAELEMENT.'/js/mediaelement-and-player.min.js|static';?>

j_colorbox.html5

<script src=“<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo $GLOBALS['TL_ASSETS']['COLORBOX']; ?>/js/colorbox.min.js“></script>

ersetzen durch:
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/colorbox/'.$GLOBALS['TL_ASSETS']['COLORBOX'].'/js/colorbox.min.js|static';?>

j_tablesort.html5

<script src=“<?php echo TL_ASSETS_URL; ?>assets/jquery/tablesorter/<?php echo $GLOBALS['TL_ASSETS']['TABLESORTER']; ?>/js/tablesorter.js“></script>

ersetzen durch:
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/tablesorter/'.$GLOBALS['TL_ASSETS']['TABLESORTER'].'/js/tablesorter.js|static';?