google-chrome - 解析 chrome 73 覆盖率导出

Question

Chrome 73 引入了期待已久的能够导出 (CSS/JS) 代码覆盖率数据的功能。有没有人研究过解析生成的 JSON 文件以创建优化的样式表/脚本？

Answer 1

这是 PHP 中的解决方案

<?php
$json_string = 'Coverage-20190407T072310.json';
$jsondata = file_get_contents($json_string);
$obj = json_decode($jsondata,true);
$output_css = '';

foreach( $obj as $arr ) {
    if( strpos( $arr['url'],"css" ) ) {

        foreach ($arr['ranges'] as $name => $value) {
            $length = $value['end'] - $value['start'];
            $output_css .= substr($arr['text'], $value['start'], $length) . PHP_EOL;
        }

        break;
    }
}

echo $output_css;
$file = 'coverage.css';
file_put_contents($file, $output_css);

?>

在 WordPress style.css 上尝试了这个，它节省了大约 300kb 的 314kb 样式表。虽然对于动态生成的样式并不完美，但这是一个好的开始。