Melhor estratégia de agregação / minificação de CSS e JS para D7

O Drupal 6 possui o incrível módulo advagg , que faz um excelente trabalho de agrupar CSS e JS de maneira inteligente , mas atualmente não possui versão D7.

O que pretendo alcançar é:

menos arquivos CSS e JS (5 arquivos CSS e 5 JS são muitos)
Os arquivos JS têm minificação (atualmente o núcleo faz isso apenas para CSS)

Existe uma solução drupal 7 que ajudará aqui? Qual é a experiência de outras pessoas em otimizar isso?

Edit: A questão foi originalmente publicada em 2011. Agora existe uma versão D7 muito estável do advagg .

7 theming performance css-js-aggregation

— wiifm
fonte

Respostas:

Para o D7, há a Biblioteca principal, que possui um modo de aprendizado agregado com base nas estatísticas do mundo real sobre o seu site.

Se você deseja forçar tudo em um agregado gigante, escrevi um artigo com algum código de exemplo:

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

A edição nº 1034208 do Drupal.org também propõe relaxar um pouco os rigorosos requisitos de pedidos.

— Dylan Tack
fonte

O agregado gigante parecia não produzir o comportamento correto; ele realmente criaria 1 arquivo CSS / JS grande para a página, mas esse arquivo mudaria dependendo da página em que você está. Obviamente, isso é menos que o ideal.

— WIIFM

Exatamente certo, se cada página carregar arquivos JS diferentes, o agregado será necessariamente diferente. Você acabou de redescobrir o motivo pelo qual o Drupal 7 divide arquivos em grupos funcionais (JS_LIBRARY, JS_DEFAULT e JS_THEME). Com sites complexos, isso geralmente é mais eficiente que um arquivo gigante.

— Dylan Tack

Se houver 3 grupos, como pode haver 5 arquivos carregados na cabeça? Por que nunca mais que 3? Agrupar tudo em um arquivo é aparentemente uma idéia horrível, mas como manter os arquivos JS em um nível mínimo?

— Rudie

Eu tentei o código mencionado aqui. Na verdade, ele cria dois arquivos js compactados para mim. Como posso criar um arquivo js?

— ARUN

@DylanTack, um dos meus sites tem problemas com o carregamento de css fiels [ drupal.stackexchange.com/questions/128649/… e o endereço do site [ living.md/]. Eu estava pensando onde colocar seu código e posso usá-lo junto com módulo advagg?

— Yama

O AdvAgg D7 está sendo desenvolvido. Outras opções (citações incluídas são de suas páginas do projeto):

UglifyJS :

... permite a minificação instantânea do JavaScript do site com o uglify.js. O módulo conta com um serviço da web (uglify.me) por padrão para fazer a minificação, assim você não precisa fazer nenhum pré-processamento no servidor para aproveitar os benefícios do JavaScript minificado.

Speedy :

... projetado para ajudar a acelerar o desempenho do front end em um site. Nesta primeira versão do módulo Speedy, ele fornece versões minificadas dos arquivos JavaScript principais que ainda não foram minificados. Por exemplo, uma versão minificada do drupal.js é fornecida enquanto o jquery.js (já minificado) não é.

— mikeytown2
fonte

O AdvAgg 7.x está agora no seu primeiro RC. drupal.org/project/advagg recomendo usá-lo

— mikeytown2