La mejor estrategia de agregación / minificación CSS y JS para D7

Drupal 6 tiene el increíble módulo advagg , que hace un trabajo increíble al agrupar CSS y JS de forma inteligente , pero actualmente no tiene la versión D7.

Lo que estoy buscando lograr es:

menos archivos CSS y JS (5 archivos CSS y 5 JS son demasiados)
Los archivos JS tienen minificación (actualmente el núcleo solo hace esto para CSS)

¿Existe una solución drupal 7 que ayude aquí? ¿Cuál es la experiencia de otras personas con la optimización de esto?

Editar: La pregunta se publicó originalmente en 2011. Ahora hay una versión D7 muy estable de advagg .

7 theming performance css-js-aggregation

— wiifm
fuente

Respuestas:

Para D7, hay Core Library que tiene un modo de aprendizaje que se agrega según las estadísticas del mundo real sobre su sitio.

Si desea forzar todo en un agregado gigante, he escrito un artículo con un código de muestra:

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

El número de Drupal.org # 1034208 también propone relajar un poco los estrictos requisitos de pedido.

— Dylan Tack
fuente

El agregado gigante no parecía producir el comportamiento correcto, de hecho haría 1 archivo CSS / JS grande para la página, pero este archivo cambiaría dependiendo de la página en la que se encuentre. Esto es obviamente menos que ideal.

— wiifm

Exactamente correcto, si cada página carga diferentes archivos JS, entonces el agregado será necesariamente diferente. Acaba de redescubrir la razón por la que Drupal 7 divide los archivos en grupos funcionales (JS_LIBRARY, JS_DEFAULT y JS_THEME). Con sitios complejos, esto suele ser más eficiente que un archivo gigante.

— Dylan Tack

Si hay 3 grupos, ¿cómo puede haber 5 archivos cargados en la cabeza? ¿Por qué no nunca más de 3? Al parecer, agrupar todo en 1 archivo es una idea horrible, pero ¿cómo mantener los archivos JS en un mínimo?

— Rudie

He intentado el código que se menciona aquí. En realidad, está creando dos archivos js comprimidos para mí. ¿Cómo puedo hacer que sea un archivo js?

— ARUN

@DylanTack uno de mi sitio web tiene problemas con la carga de archivos css [ drupal.stackexchange.com/questions/128649/… y la dirección del sitio web [ living.md/] Estaba vagando por dónde poner su código, y ¿puedo usar su código junto con módulo de Advagg?

— Yama

AdvAgg D7 se está desarrollando. Otras opciones (las citas incluidas son de sus páginas de proyecto):

UglifyJS :

... permite la minificación sobre la marcha del sitio JavaScript con uglify.js. El módulo se basa en un servicio web (uglify.me) de forma predeterminada para hacer la minificación, por lo que no necesita realizar ningún procesamiento previo en su servidor para disfrutar de los beneficios de JavaScript minificado.

Veloz :

... diseñado para ayudar a acelerar el rendimiento del front-end en un sitio. En esta primera versión del módulo Speedy, proporciona versiones minimizadas de los archivos principales de JavaScript que aún no están minificados. Por ejemplo, se proporciona una versión minificada de drupal.js mientras que jquery.js (ya minificada) no.

— mikeytown2
fuente

AdvAgg 7.x está ahora en su primer RC. drupal.org/project/advagg Recomienda usarlo

— mikeytown2