时间戳

首页 > 解决方案 > 如何在 lihthouse“减少未使用的 CSS”中解决此问题

javascript - 如何在 lihthouse“减少未使用的 CSS”中解决此问题

问题描述

我有两个 css 文件，一个是我编写的样式，另一个是我在网站上使用的库的样式。我无法从 style.min.css 中删除某些内容，因为整个站点的所有 css 代码都在那里，没有什么额外的......以及如何从文件 libs.min.css 中删除不必要的 css 代码我不知道。另外，这个文件我已经在 gulp 中自动构建了任务。

const styleLibs = () => {
return src([
        'node_modules/normalize.css/normalize.css',
        'node_modules/swiper/swiper-bundle.min.css'
    ])
    .pipe(concat('libs.min.css'))
    .pipe(cssmin())
    .pipe(dest('./app/css'))

这就是灯塔中错误的样子 在此处输入图像描述

我和JS有同样的情况

标签： javascripthtmlcsslighthouse

解决方案

这里有两件事可能：

  1. 要么在styles.css 中没有任何额外内容（正如你所提到的），但其中约26KB 没有用于呈现上述折叠内容。所以CSS可以分为“首屏”和“首屏”两部分。“首屏”可以懒加载
  2. 其中有一些额外的东西没有被使用。您可以使用 Chrome 中的代码覆盖率工具来识别https://developer.chrome.com/docs/devtools/coverage/。在将某些内容视为未使用之前，请确保您与页面交互（例如，任何鼠标悬停效果、切换的内容）

推荐阅读