在 React 构建中减少 Lighthouse "First Meaningful Paint"

Question

我的 React 应用程序在主页上呈现大量图像。

而且我已经做了一些改进：

到处使用react-lazy-load-image-component。
lazy，Suspense 反应路线。
配置几个压缩插件：

  config.plugins.push(new CompressionPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.(js|css|html|svg)$/,
    threshold: 8192,
    minRatio: 0.8
  }))

  config.plugins.push(new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
  }))

但是我的成绩还是很差我将根据要求提供额外的数据或屏幕。

测试是在匿名浏览器中进行的window。使用：

yarn build --profile
serve -s build

Answer 1

两个主要观察结果：

有两张非常大 (3+MB) 的 jpg 图像，我建议您了解如何使用图形程序进行优化，即使是像 Preview (MacOS) 这样的简单图像，也可以通过缩小尺寸或其他方式进行优化。这两个是您“避免巨大的网络负载”报告中最大的问题，但您也可以考虑优化其他问题。
React（或其他静态）应用程序的本地服务通常给我的性能比 CDN 后面的通常部署环境差得多。所以在这一点上，我主要针对部署环境运行 Lighthouse，至少针对性能报告。特别是，支持 HTTP/2、提供缓存 headers 并且通常为提高性能而构建的环境（相对于通常未为此目的优化的本地服务器）可能值得考虑，以获得如下结果更好地反映生产中的情况。

Lighthouse 试图在指出细节方面做得很好，所以一旦您运行将其用于 production-like 环境（如果您选择这样做），我建议仔细查看其他部分，在出现混淆的地方单击“了解更多”链接，并根据 Lighthouse 提供的建议查看可以进一步优化的地方。

希望对您有所帮助！

在 React 构建中减少 Lighthouse "First Meaningful Paint"

Reduce Lighthouse "First Meaningful Paint" in React build

lighthouse

reactjs

webpack