Meilleure stratégie d'agrégation / minification CSS et JS pour D7

8

Drupal 6 a le module advagg génial , qui fait un travail génial de regrouper intelligemment CSS et JS, mais actuellement aucune version D7.

Ce que je cherche à réaliser, c'est:

  • moins de fichiers CSS et JS (5 fichiers CSS et 5 JS, c'est beaucoup trop)
  • Les fichiers JS ont une minification (actuellement, le noyau ne le fait que pour CSS)

Y a-t-il une solution drupal 7 qui vous aidera ici? Quelle est l'expérience des autres en optimisant cela?


Edit: La question a été initialement publiée en 2011. Il existe maintenant une version D7 très stable d' Advagg .

wiifm
la source

Réponses:

12

Pour D7, il y a Core Library qui a un mode d'apprentissage qui agrège en fonction des statistiques du monde réel sur votre site.

Si vous voulez tout forcer en un seul agrégat géant, j'ai écrit un article avec un exemple de code:

/**
 * 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;
  }
}

Le numéro Drupal.org # 1034208 propose également d'assouplir légèrement les exigences strictes de commande.

Dylan Tack
la source
L'agrégat géant ne semblait pas produire le bon comportement, il ferait en effet 1 gros fichier CSS / JS pour la page, mais ce fichier changerait en fonction de la page sur laquelle vous vous trouvez. C'est évidemment loin d'être idéal.
wiifm
Exactement, si chaque page charge des fichiers JS différents, l'agrégat sera nécessairement différent. Vous venez de découvrir la raison pour laquelle Drupal 7 divise les fichiers en groupes fonctionnels (JS_LIBRARY, JS_DEFAULT et JS_THEME). Avec des sites complexes, cela est souvent plus efficace qu'un fichier géant.
Dylan Tack
1
S'il y a 3 groupes, comment peut-il y avoir 5 fichiers chargés dans la tête? Pourquoi pas plus de 3? Tout regrouper dans un seul fichier est apparemment une idée horrible, mais comment garder les fichiers JS au minimum?
Rudie
j'ai essayé le code mentionné ici. En fait, cela crée deux fichiers js compressés pour moi. Comment puis-je en faire un fichier js?
ARUN
@DylanTack, l'un de mes sites Web a un problème avec le chargement des fichiers CSS [ drupal.stackexchange.com/questions/128649/… et l'adresse du site Web [ living.md/] Je me demandais où mettre votre code, et puis-je utiliser votre code avec module advagg?
Yama
3

AdvAgg D7 est en cours de développement. Autres options (les citations incluses proviennent de leurs pages de projet):

... permet la minification à la volée du JavaScript du site avec uglify.js. Le module s'appuie par défaut sur un service web (uglify.me) pour faire la minification donc vous n'avez pas besoin de faire de prétraitement sur votre serveur pour profiter des avantages du JavaScript minifié.

... conçu pour accélérer les performances frontales d'un site. Dans cette première version du module Speedy, il fournit des versions minifiées des fichiers JavaScript principaux qui ne sont pas déjà minifiés. Par exemple, une version minifiée de drupal.js est fournie alors que jquery.js (déjà minifié) ne l'est pas.

mikeytown2
la source
AdvAgg 7.x est maintenant à son premier RC. drupal.org/project/advagg Recommande de l'utiliser
mikeytown2