D7을위한 최고의 CSS 및 JS 집계 / 축소 전략


8

Drupal 6에는 멋진 advagg 모듈이 있습니다.이 모듈은 CSS와 JS 를 지능적으로 번들링 하는 훌륭한 작업을 수행 하지만 현재 D7 릴리스는 없습니다.

내가 달성하고자하는 것은 다음과 같습니다.

  • 적은 CSS 및 JS 파일 (5 개의 CSS 및 5 개의 JS 파일이 너무 많다)
  • JS 파일이 축소되었습니다 (현재 핵심은 CSS에 대해서만 수행함)

여기에 도움이 될 drupal 7 솔루션이 있습니까? 이것을 최적화 한 다른 사람들의 경험은 무엇입니까?


편집 : 질문은 원래 2011 년에 게시되었습니다. advagg 의 매우 안정적인 D7 릴리스가 있습니다 .

답변:


12

D7에는 사이트에 대한 실제 통계를 기반으로 집계하는 학습 모드가있는 핵심 라이브러리 가 있습니다.

모든 것을 하나의 거대한 집합체로 무차별 대입하려면 샘플 코드 가있는 기사작성했습니다 .

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

Drupal.org 문제 # 1034208 은 또한 엄격한 주문 요구 사항을 완화 할 것을 제안합니다.


거대한 집계는 올바른 동작을 생성하지 않는 것 같습니다. 실제로 페이지에 대해 하나의 큰 CSS / JS 파일을 만들지 만이 파일은 현재 페이지에 따라 변경됩니다. 이것은 분명히 이상적이지 않습니다.
wiifm

정확히, 각 페이지가 다른 JS 파일을로드하면 집합이 반드시 달라집니다. Drupal 7이 파일을 기능 그룹 (JS_LIBRARY, JS_DEFAULT 및 JS_THEME)으로 분할하는 이유를 다시 발견했습니다. 복잡한 사이트에서는 종종 하나의 거대한 파일보다 효율적입니다.
Dylan Tack

1
그룹이 3 개인 경우 어떻게 헤드에 5 개의 파일을로드 할 수 있습니까? 왜 3을 넘지 않는가? 하나의 파일에 모든 것을 묶는 것은 끔찍한 생각이지만 JS 파일을 mimimum로 유지하는 방법은 무엇입니까?
Rudie

나는 여기에 언급 된 코드를 시도했다. 실제로 그것은 나를 위해 두 개의 압축 된 js 파일을 만듭니다. 하나의 js 파일로 만들려면 어떻게해야합니까?
ARUN

@DylanTack 내 웹 사이트 중 하나에 css fiels [ drupal.stackexchange.com/questions/128649/… 및 웹 사이트 주소 [ living.md/] 를로드하는 데 문제가 있습니다. 코드를 넣을 곳을 헤매고 있었고 코드를 advagg 모듈?
야마

3

AdvAgg D7이 개발 중입니다. 다른 옵션 (따옴표는 프로젝트 페이지에서 제공) :

... uglify.js를 사용하여 사이트 JavaScript를 즉시 축소 할 수 있습니다. 모듈은 축소를 수행하기 위해 기본적으로 웹 서비스 (uglify.me)를 사용하므로 축소 된 JavaScript의 이점을 누리기 위해 서버에서 사전 처리를 수행 할 필요가 없습니다.

... 사이트에서 프런트 엔드 성능을 높이도록 설계되었습니다. Speedy 모듈의 첫 번째 릴리스에서는 아직 축소되지 않은 핵심 JavaScript 파일의 축소 버전을 제공합니다. 예를 들어, 축소 된 버전의 drupal.js가 제공되지만 jquery.js (이미 축소됨)는 제공되지 않습니다.


AdvAgg 7.x는 이제 첫 RC에 있습니다. drupal.org/project/advagg 추천 사용
mikeytown2
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.