Optimierung - Externe JavaScripts zusammenfassen um HTTP-Request zu sparen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie kann man mehrere JavaScripts zusammenfassen?

03Feb2014

Externe JavaScripts zusammenfassen um HTTP-Request zu sparen


Auch hierbei nutze ich ein kleines "php-Script (Skriptsprache: Hypertext Preprocessor)" das ähnlich aufgebaut ist wie das Script im vorherigen Artikel. Ich habe das Script auch wieder dahingehend geändert, dass in der Datei noch zusätzlich der Last-Modified-Header ausgegeben wird, um das aktuelle Änderungsdatum bei einer Analyse anzuzeigen.
Und man findet es ebenfalls auf der Webseite von Webdesign tepelmann.

Beim Test ist mir allerdings ein Fehler beim Entfernen des Zeilenvorschub aufgefallen, so dass ich anfangs die Zeile:

<?php
  ...
  $content = str_replace(array("\r\n","\r","\n","\t"),"", $content);
  ...
?>

geändert hatte in:

<?php
  ...
  $content = str_replace(array("\r\n","\r","\t"),"", $content);
  ...
?>

Aber dann habe ich den tatsächlichen Fehler im Script für die Suchfunktion gefunden, wo ganz am Ende kein Semikolon geschrieben wurde und damit das nächste Script für das "Langsame Scrollen" nicht funktionieren konnte. Nachdem ich den Fehler behoben habe, erhalte ich das folgende Script:

<?php
  header('Content-type:text/javascript');
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  function get_remote_file($url) {
    if (ini_get('allow_url_fopen')) {
      return file_get_contents($url);
    }
    elseif (function_exists('curl_init')) {
      $c = curl_init($url);
      curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
      curl_setopt($c, CURLOPT_HEADER, 0);
      $file = curl_exec($c);
      curl_close($c);
      return $file;
    }
    else {
    die('Error');
    }
  }

  // JavaScripts zusammenfassen
  $content = get_remote_file('.../js/prefixfree.js');
  $content .= get_remote_file('.../js/index.js');
  $content .= get_remote_file('.../js/smoothscroll.js');

  // Kommentare entfernen
  $content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);

  // Tabs, Leerzeichen und Zeilenumbrüche entfernen
  $content = str_replace(array("\r\n","\r","\n","\t"),"", $content);

  // Ausgabe der zusammengefassten JavaScripts
  echo $content;

?>

Damit werden nun nicht mehr alle JavaScripts einzeln in der Webseite eingebunden, sondern es wird nur noch das php-Script (Skriptsprache: Hypertext Preprocessor), welches die JavaScripts zusammenführt, am Ende der Webseite eingebunden.

<script type="text/javascript" src="globales/alle_js.php"></script>

Für diese Seite wird aus 3 HTTP-Request (Hypertext Transfer Protocol Anforderung) für die einzelnen JavaScripts nur noch 1 HTTP-Request (Hypertext Transfer Protocol Anforderung) für den Aufruf der Datei "alle_js.php" und damit ist die Optimierung bestmöglich umgesetzt.

Zum Seitenanfang springen Λ