Hướng dẫn delete js file và css trong Drupal

Trong Drupal có một số file CSS hay JS trong hệ thống được load sẵn một cách mặc định.Như vậy sẽ khiến cho vấn đề: Khi viết mã sẽ không đúng như thiết kế ban đầu ( Font chữ,định dạng mặc định ban đầu,căn chỉnh vị trí như padding margin....v....v) Các file CSS hay JS thừa sẽ làm tăng kích thước file load về từ.Khiến load chậm hơn.

Trong Drupal có một số file CSS hay JS trong hệ thống được load sẵn một cách mặc định.Như vậy sẽ khiến cho vấn đề:

Khi viết mã sẽ không đúng như thiết kế ban đầu ( Font chữ,định dạng mặc định ban đầu,căn chỉnh vị trí như padding margin....v....v)

Vì sao nên xóa?

Trong Drupal có một số file CSS hay JS trong hệ thống được load sẵn một cách mặc định.Như vậy sẽ khiến cho vấn đề:

Khi viết mã sẽ không đúng như thiết kế ban đầu ( Font chữ,định dạng mặc định ban đầu,căn chỉnh vị trí như padding margin....v....v)

Các file CSS hay JS thừa sẽ làm tăng kích thước file load về từ.Khiến load chậm hơn.

Vì sao nên dùng hook để thêm?

Khi load 1 page.Việc viết hết code CSS vào 1 file CSS  là khá lãng phí.Giả sử trên trang chủ ta có module tên là slider.Ta phải trang trí css cho nó.Nhưng đến các trang khác không phải trang chủ,không có CSS.Code đó vẫn được load lại.Điều đó không ổn.Ta sẽ chỉ load đoạn CSS nào mà page đó dùng thôi.Như thế sẽ tiết kiệm được băng thông nhiều => tăng tốc load trang.

Các thực hiện:

Dùng các hàm hook_js_alter hoặc hook_css_alter viết trong file template.php

ví dụ :

<?php
function hook_js_alter(&$javascript) {
  // Swap out jQuery to use an updated version of the library.
  $javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'jquery_update') . '/jquery.js';
}
function hook_css_alter(&$css) {
  // Remove defaults.css file.
  unset($css[drupal_get_path('module', 'system') . '/defaults.css']);
}
?>

hoặc một cách đơn giản hơn thì ta có thể dùng hàm preprocess_page hoặc preprocess_html

cách dùng thì như trên bài tham chiếu ở dưới đây :

I'm creating a mobile theme for a Drupal website and trying to remove all unnecessary core and module JavaScript and css through the preprocess_pagefunction in my template.php file. The css files are successfully removed, but I can't seem to get the JavaScript to be removed. Here's what I've got. In this example, everything is successfully removed except for the the ajax scripts.

<?php
function mytheme_preprocess_page(&$vars) {
    //////// remove unneccesary drupal head files for mobile version
    // CSS
    $css = drupal_add_css();
       // core
    unset($css['all']['module']['modules/user/user.css']);
    unset($css['all']['module']['modules/node/node.css']);
    unset($css['all']['module']['modules/system/defaults.css']);
    unset($css['all']['module']['modules/system/system.css']);
    unset($css['all']['module']['modules/system/system-menus.css']);
       // contributed -- automatically generate the path—— just easier this way
    $rm[] = drupal_get_path('module','filefield').'/filefield.css';
    $rm[] = drupal_get_path('module','flickr').'/flickr.css';
    $rm[] = drupal_get_path('module','logintoboggan').'/logintoboggan.css';
    $rm[] = drupal_get_path('module','logintoboggan').'/logintoboggan.css';
    $rm[] = drupal_get_path('module','fieldgroup').'/fieldgroup.css';
    $rm[] = drupal_get_path('module','views').'/css/views.css';
    $rm[] = drupal_get_path('module','content').'/theme/content-module.css';
       // remove the contribs from the array
    foreach ($rm as $key => $value) {
      unset($css['all']['module'][$value]);
    }
    // JAVASCRIPT
    $scripts = drupal_add_js();

    unset($scripts['module']['sites/all/modules/ajax/ajax.js']);
    unset($scripts['module']['sites/all/modules/ajax/jquery/jquery.a_form.packed.js']);

    // recreate the tempalate variables
    $vars['styles'] = drupal_get_css($css);
    $vars['scripts'] = drupal_get_js('header', $scripts);
}
?>

ETA: Here is the way the scripts print out in the header:

<script type="text/javascript" src="/sites/all/modules/ajax/jquery/jquery.a_form.packed.js?P"></script>
<script type="text/javascript" src="/sites/all/modules/ajax/ajax.js?P"></script>