chrome浏览器查看css样式

样式的查看

1.匹配器为灰色文本：表示非当前选择器

在这里插入图片描述

2.样式有划线标识：CSS属性无效或未知 / 属性值无效 / 被其他属性覆盖的属性

在这里插入图片描述

3.属性以浅色文本显示且有感叹号提示：属性虽然有效，但由于CSS逻辑而没有任何影响

在这里插入图片描述
转自：https://juejin.cn/post/7331070699899699238?searchId=202404151029067DA5129CBA117B77C15F

移除无用的css样式

1.构建时删除

webpack插件purgecss-webpack-plugin
（似乎需要 node 14 or higher is required && purgecss-webpack-plugin@3.0.0/webpack4 但都尝试过了都build不起来，放弃）
收益：引入新的插件会增加项目的依赖关系，如果你的项目非常小，或者你的 CSS 代码量本身就不大，那么使用 purgecss-webpack-plugin 带来的收益可能相对较小。然而，对于大型项目或具有大量 CSS 代码的项目，该插件的收益可能更加明显。如果你的项目中使用了动态生成的 CSS（例如，通过 JavaScript 动态添加样式），purgecss-webpack-plugin 可能无法正确识别这些未使用的样式

2.动态分析，手动删除

coverage:移除没用的代码，懒加载代码。
在这里插入图片描述

除了页面上加载的所有脚本的URL（此处未显示，但通常会显示在最左侧）之外，我们还得到脚本的类型，文件的总大小和未使用的字节数。右侧的条显示了已使用和未使用代码之间的划分，红色部分显示了百分比的可视表示。
在屏幕的左下角，您还将看到页面上加载的未使用代码的总百分比。
在这里插入图片描述
从上面的例子中可以看出，2.3 MB的CSS和JS 1.5 MB(64%)在初始加载时没有在这个特定的页面上使用。通过单击底部窗格中的单个行，您还可以看到顶部页面中没有使用的特定代码块

coverage 可用来发现页面中尚未用到的js 和 css代码，你可以为用户只提供必要的代码，这样就可以提升页面的性能。这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用