Strategi agregasi / minifikasi CSS dan JS terbaik untuk D7

8

Drupal 6 memiliki modul advagg yang mengagumkan , yang melakukan pekerjaan yang luar biasa untuk menggabungkan CSS dan JS secara cerdas , tetapi saat ini tidak ada rilis D7.

Apa yang ingin saya capai adalah:

  • lebih sedikit file CSS dan JS (5 file CSS dan 5 file JS terlalu banyak)
  • File JS memiliki minifikasi (saat ini inti hanya melakukan ini untuk CSS)

Apakah ada solusi drupal 7 yang akan membantu di sini? Apa pengalaman orang lain dengan mengoptimalkan ini?


Sunting: Pertanyaan ini awalnya diposting pada tahun 2011. Sekarang ada rilis advagg D7 yang sangat stabil .

wiifm
sumber

Jawaban:

12

Untuk D7, ada Core Library yang memiliki mode pembelajaran yang dikumpulkan berdasarkan statistik dunia nyata tentang situs Anda.

Jika Anda ingin memaksa semuanya menjadi satu agregat raksasa, saya telah menulis artikel dengan beberapa kode contoh:

/**
 * 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 issue # 1034208 juga mengusulkan untuk sedikit mengurangi persyaratan pemesanan yang ketat.

Dylan Tack
sumber
Agregat raksasa tampaknya tidak menghasilkan perilaku yang benar, itu memang akan membuat 1 file CSS / JS besar untuk halaman, tetapi file ini akan berubah tergantung pada halaman Anda. Ini jelas kurang ideal.
wiifm
Tepat sekali, jika setiap halaman memuat file JS yang berbeda, maka agregat akan berbeda. Anda baru saja menemukan kembali alasan Drupal 7 membagi file menjadi kelompok fungsional (JS_LIBRARY, JS_DEFAULT, dan JS_THEME). Dengan situs yang kompleks ini seringkali lebih efisien daripada satu file raksasa.
Dylan Tack
1
Jika ada 3 grup, bagaimana bisa ada 5 file yang dimuat di kepala? Mengapa tidak pernah lebih dari 3? Membundel segala sesuatu dalam 1 file tampaknya adalah ide yang mengerikan, tetapi bagaimana menjaga agar file JS tetap minimum?
Rudie
Saya sudah mencoba kode yang disebutkan di sini. Sebenarnya itu membuat dua file js terkompresi untuk saya. Bagaimana saya bisa membuatnya menjadi file js?
ARUN
@DylanTack salah satu situs web saya memiliki masalah dengan memuat css fiel [ drupal.stackexchange.com/questions/128649/… dan alamat situs web [ living.md/] Saya berkeliaran di mana harus meletakkan kode Anda, dan dapatkah saya menggunakan kode Anda bersama dengan modul advagg?
Yama
3

AdvAgg D7 sedang dikembangkan. Pilihan lain (kutipan termasuk dari halaman proyek mereka):

... memungkinkan minifikasi on-the-fly JavaScript situs dengan uglify.js. Modul ini bergantung pada layanan web (uglify.me) secara default untuk melakukan minifikasi sehingga Anda tidak perlu melakukan pra-pemrosesan pada server Anda untuk menikmati manfaat JavaScript yang diperkecil.

... dirancang untuk membantu mempercepat kinerja ujung depan di sebuah situs. Dalam rilis pertama modul Speedy ini, ia menyediakan versi yang diperkecil dari file JavaScript inti yang belum diperkecil. Sebagai contoh, versi minup dari drupal.js disediakan sementara jquery.js (sudah diperkecil) tidak.

mikeytown2
sumber
AdvAgg 7.x sekarang pada RC pertamanya. drupal.org/project/advagg Rekomendasikan menggunakannya
mikeytown2