drupal刪除未使用的css

Question

我使用的是drupal 6.是否有任何方法在加載之前從頁面中刪除未使用的css（例如，從system.css）。未使用的css通過增加加載時間來降低我的網站性能。

Answer 1

您將花費更多時間解析CSS，而不是僅僅加載文件。由於每個頁面都有不同的結果CSS文件，因此您將失去正在緩存的CSS的任何好處。你最好簡單地優化和壓縮你的CSS，而不是試圖在每次頁面加載時解析它。

Answer 2

如果您的意思是說css沒有使用，因爲規則從未應用於任何頁面，或者您在主題中覆蓋它們，那麼一種解決方案是完全排除違規樣式表，並實現您希望在主題中使用的規則代替。

有幾種方法可以做到這一點，包括style stripper module（我還沒有嘗試過），通過在template.php中取消設置變量或通過將system.css文件複製到主題中來實現最簡單的方法（並且記住添加到theme.info），然後修剪你的心臟的內容。

此外，如果您的網站上有一些很少訪問的網頁類別的規則未在別處使用（例如管理頁面），則可以考慮將這些規則放在單獨的文件中並有條件地將它們與主題相關聯。

Answer 3

您也可以啓用css文件優化，看看「管理>站點配置>性能」。這將減少對您網站的請求的大小和數量，因爲它會將您的css文件聚合並壓縮爲單個文件。

Answer 4

對於D7可以使用hook_css_alter

從http://drupalcode.org/project/tao.git/blob/HEAD:/template.php

<?php 
/** 
* Implements hook_css_alter(). 
* @TODO: Once http://drupal.org/node/901062 is resolved, determine whether 
* this can be implemented in the .info file instead. 
* 
* Omitted: 
* - color.css 
* - contextual.css 
* - dashboard.css 
* - field_ui.css 
* - image.css 
* - locale.css 
* - shortcut.css 
* - simpletest.css 
* - toolbar.css 
*/ 
function tao_css_alter(&$css) { 
$exclude = array(
'misc/vertical-tabs.css' => FALSE, 
'modules/aggregator/aggregator.css' => FALSE, 
'modules/block/block.css' => FALSE, 
'modules/book/book.css' => FALSE, 
'modules/comment/comment.css' => FALSE, 
'modules/dblog/dblog.css' => FALSE, 
'modules/file/file.css' => FALSE, 
'modules/filter/filter.css' => FALSE, 
'modules/forum/forum.css' => FALSE, 
'modules/help/help.css' => FALSE, 
'modules/menu/menu.css' => FALSE, 
'modules/node/node.css' => FALSE, 
'modules/openid/openid.css' => FALSE, 
'modules/poll/poll.css' => FALSE, 
'modules/profile/profile.css' => FALSE, 
'modules/search/search.css' => FALSE, 
'modules/statistics/statistics.css' => FALSE, 
'modules/syslog/syslog.css' => FALSE, 
'modules/system/admin.css' => FALSE, 
'modules/system/maintenance.css' => FALSE, 
'modules/system/system.css' => FALSE, 
'modules/system/system.admin.css' => FALSE, 
'modules/system/system.base.css' => FALSE, 
'modules/system/system.maintenance.css' => FALSE, 
'modules/system/system.menus.css' => FALSE, 
'modules/system/system.theme.css' => FALSE, 
'modules/taxonomy/taxonomy.css' => FALSE, 
'modules/tracker/tracker.css' => FALSE, 
'modules/update/update.css' => FALSE, 
'modules/user/user.css' => FALSE, 
); 
$css = array_diff_key($css, $exclude); 
} 

您還可以在主題覆蓋.INFO爲D6和D7現在https://drupal.org/node/901062。

一些主題已經開發利用的.info用一些輔助和cssexclude鍵和hook_css_alter

<?php 
function twitter_bootstrap_css_alter(&$css) { 
//global $theme_key; 
//$theme_path = drupal_get_path('theme', $theme_key); 

$excludes = _twitter_bootstrap_alter(twitter_bootstrap_theme_get_info('exclude'), 'css'); 
$css = array_diff_key($css, $excludes); 
} 

function twitter_bootstrap_js_alter(&$js) { 
$excludes = _twitter_bootstrap_alter(twitter_bootstrap_theme_get_info('exclude'), 'js'); 
$js = array_diff_key($js, $excludes); 
} 

function _twitter_bootstrap_alter($files, $type) { 
$output = array(); 

foreach($files as $key => $value) { 
if(isset($files[$key][$type])) { 
foreach($files[$key][$type] as $file => $name) { 
$output[$name] = FALSE; 
} 
} 
} 
return $output; 
} 

對性能的影響是低的，因爲hook_css_atler不經常運行。

Answer 5

如果您熟悉節點JS，你也可以使用「查找未使用的CSS」：https://www.npmjs.com/package/find-unused-css

它僅支持HTML文件，並找出你的項目未使用的CSS。