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。