从页面中提取使用的CSS

Question

我需要从一个19,000行的CSS文件中提取使用过的CSS，其中98.4％是未使用过的（ouch）。我知道您可以使用Chrome开发者工具查看CSS Coverage，如下所示：

但它不允许你甚至跳到绿线。手动通过19K线似乎不可行。

Chrome Lighthouse似乎没有为您提供仅选择开发人员工具所需规则的选项。

我尝试过Firefox的“CSS Usage”插件（很多网站都推荐），但它需要FireBug，FireBug本身在当前版本的FireFox中不兼容。

任何人都可以想出一种方法来拉出以某种方式使用的CSS吗？

Answer 1

希望这会对你有所帮助

https://uncss-online.com/

只需在左侧添加html，在右侧添加css。点击ok btn然后看魔术

  

如果css中有任何错误，那么它会要求您删除该行号中的错误。

这是最简单的方法：）

Answer 2

我对我的一些项目使用PurifyCSS。帮助我保持CSS轻量级。

不要＆＃39;了解您的项目结构和工作流程，但有大量的教程：

https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726

https://survivejs.com/webpack/styling/eliminating-unused-css/

还有一些在线解决方案可以摆脱未使用的CSS，但从未尝试过：

https://uncss-online.com/

Answer 3

从Chrome（> = v73）[What's New In DevTools - Chrome 73]下载Coverage .json后。

您可以使用以下节点脚本提取CSS：

node extractCSS.js ~/Desktop/Coverage-20190325T110812.json
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://d33wubrfki0l68.cloudfront.net/css/1bd6a34e1fcf409d29d1a960e6299893fca2e7b1/css/all.css
https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css
./final_css.css file saved

# extractCSS.js
const fs = require('fs');

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

const filename = process.argv[2]
const output = './final_css.css'

if(!filename) {
  console.error('Missing filename to get coverage information from');
  process.exit();
}

const file_coverage = fs.readFileSync(filename);

const css_coverage = JSON.parse(file_coverage);

for (const entry of css_coverage) {
  if (!entry.url.endsWith('.css')) continue;
  console.log(entry.url)
  final_css_bytes += '# ' + entry.url + '\n\n'
  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }
  final_css_bytes += '\n\n'
}

fs.writeFile(output, final_css_bytes, error => {
  if (error) {
    console.log('Error creating file:', error);
    return
  }
  console.log(output, 'file saved');
});

https://gist.github.com/gianpaj/a2f99e022e2c3f8abb9deecb47d572c4

灵感来自：https://blog.fullstacktraining.com/remove-unused-css-javascript-code-from-your-project/