Beste CSS- und JS-Aggregations- / Minimierungsstrategie für D7

Drupal 6 verfügt über das fantastische Advagg- Modul, das CSS und JS auf intelligente Weise intelligent bündelt, derzeit jedoch keine D7-Version.

Was ich erreichen möchte, ist:

weniger CSS- und JS-Dateien (5 CSS- und 5 JS-Dateien sind viel zu viele)
JS-Dateien sind minimiert (derzeit wird dies nur für CSS im Kern ausgeführt).

Gibt es eine Drupal 7-Lösung, die hier hilft? Welche Erfahrungen haben andere mit der Optimierung gemacht?

Bearbeiten: Die Frage wurde ursprünglich im Jahr 2011 veröffentlicht. Es gibt jetzt eine sehr stabile D7-Version von advagg .

7 theming performance css-js-aggregation

— wiifm
quelle

Antworten:

Für D7 gibt es die Core Library mit einem Lernmodus, der basierend auf realen Statistiken über Ihre Site aggregiert.

Wenn Sie alles zu einem riesigen Aggregat zusammenfassen möchten, habe ich einen Artikel mit einem Beispielcode geschrieben:

/**
 * Implements hook_js_alter().
 */
function mymodule_js_alter(&$javascript) {
  uasort($javascript, 'drupal_sort_css_js');
  $i = 0;
  foreach ($javascript as $name => $script) {
    $javascript[$name]['weight'] = $i++;
    $javascript[$name]['group'] = JS_DEFAULT;
    $javascript[$name]['every_page'] = FALSE;
  }
}

/**
 * Implements hook_css_alter().
 */
function mymodule_css_alter(&$css) {
  uasort($css, 'drupal_sort_css_js');
  $i = 0;
  foreach ($css as $name => $style) {
    $css[$name]['weight'] = $i++;
    $css[$name]['group'] = CSS_DEFAULT;
    $css[$name]['every_page'] = FALSE;
  }
}

In der Drupal.org-Ausgabe Nr. 1034208 wird außerdem vorgeschlagen, die strengen Bestellanforderungen leicht zu lockern .

— Dylan Tack
quelle

Das riesige Aggregat schien nicht das richtige Verhalten zu erzeugen, es würde zwar 1 große CSS / JS-Datei für eine Seite erstellen, aber diese Datei würde sich abhängig von der Seite ändern, auf der Sie sich befinden. Dies ist offensichtlich nicht ideal.

— wiifm

Genau richtig, wenn jede Seite unterschiedliche JS-Dateien lädt, ist das Aggregat notwendigerweise unterschiedlich. Sie haben gerade den Grund wiederentdeckt, warum Drupal 7 Dateien in Funktionsgruppen aufteilt (JS_LIBRARY, JS_DEFAULT und JS_THEME). Bei komplexen Sites ist dies oft effizienter als eine riesige Datei.

— Dylan Tack

Wenn es 3 Gruppen gibt, wie können 5 Dateien in den Kopf geladen werden? Warum nicht nie mehr als 3? Alles in einer Datei zu bündeln ist anscheinend eine schreckliche Idee, aber wie kann man die JS-Dateien auf ein Minimum beschränken?

— Rudie

Ich habe den hier erwähnten Code ausprobiert. Eigentlich werden zwei komprimierte JS-Dateien für mich erstellt. Wie kann ich daraus eine js-Datei machen?

— ARUN

@DylanTack Eine meiner Websites hat Probleme beim Laden von CSS-Feldern [ drupal.stackexchange.com/questions/128649/… und der Website-Adresse [ living.md/]. Ich habe gewandert, wo ich Ihren Code ablegen soll , und kann ich Ihren Code zusammen mit verwenden ? Advagg-Modul?

— Yama

AdvAgg D7 wird entwickelt. Andere Optionen (Zitate enthalten sind von ihren Projektseiten):

UglifyJS :

... ermöglicht die sofortige Minimierung der Website JavaScript mit uglify.js. Das Modul verwendet standardmäßig einen Webdienst (uglify.me), um die Minimierung durchzuführen, sodass Sie keine Vorverarbeitung auf Ihrem Server durchführen müssen, um die Vorteile von minimiertem JavaScript nutzen zu können.

Schnell :

... entwickelt, um die Front-End-Leistung auf einer Site zu beschleunigen. In dieser ersten Version des Speedy-Moduls werden minimierte Versionen von JavaScript-Kerndateien bereitgestellt, die noch nicht minimiert sind. Beispielsweise wird eine minimierte Version von drupal.js bereitgestellt, jquery.js (bereits minimiert) nicht.

— mikeytown2
quelle

AdvAgg 7.x ist jetzt bei seinem ersten RC. drupal.org/project/advagg Empfehlen Sie es

— mikeytown2