我正在与其他 2 位大学开发人员一起开发一个简单的 Web 应用程序。我们使用了几个库和包。我现在正在尝试让我们的应用程序准备好部署，但注意到它很慢。有很多未使用的 CSS 规则。
我尝试手动浏览已编译的样式，搜索引用并删除。但这真的很乏味。
我的问题是：
我会说是的。在您的生产版本中包含任何未使用的代码并不酷。
然而，除非出现非常错误的情况，否则你的 CSS 是页面加载缓慢的原因是非常不可能的，事实上，加载几个未使用的 css 规则的页面的影响几乎可以忽略不计。更可能是图像/媒体，或者脚本。
您可能应该调查是什么降低了您的页面速度。查看开发工具的网络选项卡以开始调试页面加载缓慢的原因，Google Page Load Insights也可能有所帮助。看看这个博客系列，关于加速你的网络应用程序。
如果您还没有这样做，您可能还应该缩小并捆绑您的 CSS 和 JS 以进行生产。
删除未使用的 CSS 是一项常见的任务，并且有很多软件包和工具使其变得简单。有几种选择，继续前进：
如果您的应用程序仍然很小，这可能是最简单的方法。
- 打开 Chrome 开发者工具
- 使用以下命令打开命令菜单：cmd + shift + p
- 输入“Coverage”并点击“Show Coverage”选项
- 从 Coverage 选项卡中选择一个 CSS 文件，这将在 Sources 选项卡中打开该文件
资料来源：谷歌开发者，Chrome 59
那里有一些工具，您可以在其中提供一个指向您网站的链接，它会搜索并找到未使用的 CSS。这里的缺点是这在本地不起作用。
uncss允许您在构建时或编译时自动删除未使用的 CSS。它也适用于 Grunt 和 Babel。
警告一句，您的某些 CSS 可能会被检测为未使用，当您稍后实际使用它时，例如当请求已完成加载时。确保不要删除间接使用的类。
编辑：
使用 CSS 覆盖率时要小心，它认为媒体查询、悬停效果和其他无用，因为它们在加载页面时未应用
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句