drupal 删除未使用的 css

Question

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

Answer 1

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

Answer 2

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

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

Answer 3

对于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_alter 不经常运行。

Answer 4

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

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

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

Answer 5

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