Question

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

Answer 1

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

Answer 2

如果您的意思是css未被使用，因为规则永远不会应用于任何页面或您在主题中覆盖它们，那么一种解决方案是完全排除违规样式表并实现您在主题中想要的规则

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

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

Answer 3

您还可以启用css文件优化，查看“管理>站点配置＆gt;性能”。这将减少对您网站的请求的大小和数量，因为它会将您的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 with和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，您还可以使用＆＃34;查找未使用的css＆＃34;：https://www.npmjs.com/package/find-unused-css

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

drupal删除未使用的CSS

5 个答案: