drupal 删除未使用的 CSS

Question

我正在使用drupal 6。有没有办法在加载之前从页面中删除未使用的css（例如从system.css）。未使用的 CSS 会增加加载时间，从而降低我网站的性能。

Answer 1

与开始加载文件相比，您将花费更多时间来解析 CSS。您将失去缓存 CSS 的任何好处，因为每个页面都会有不同的结果 CSS 文件。与尝试在每次页面加载时解析它相比，您最好简单地优化和压缩您的 CSS。

Answer 2

对于 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 3

如果你熟悉node js，也可以使用“查找未使用的css”：https://www.npmjs.com/package/find-unused-css

它只支持html文件并找出你项目中未使用的css。

Answer 4

如果您的意思是 CSS 未被使用，因为这些规则从未应用于任何页面，或者您在主题中覆盖它们，那么一种解决方案是完全排除有问题的样式表并在主题中实施您确实想要的规则.

有几种方法可以做到这一点，包括style stripper module（我没有尝试过），通过在 template.php 中取消设置变量，或者最简单的方法是将 system.css 文件复制到您的主题（并记住添加到 theme.info），然后根据你的内心进行修剪。

此外，如果您的网站上有一些很少访问的页面类别具有其他地方未使用的规则（例如管理页面），您可以考虑将这些规则放在一个单独的文件中，并有条件地从您的主题中包含它们。

Answer 5

您还可以启用 css 文件优化，查看“管理 › 站点配置 > 性能”。这将减少对您网站的请求的大小和数量，因为它会将您的 css 文件聚合并压缩成一个单个文件。