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

Question

我有 React 应用程序，可以在主页上呈现大量图像。

我已经做了一些改进:

使用 react-lazy-load-image-component到处。

lazy , Suspense对于 react 路线。

配置几个压缩插件:

  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
  }))

但是我的性能还是很差



我会根据要求提供额外的数据或屏幕。

测试是在匿名浏览器窗口中进行的。
使用:

yarn build --profile
serve -s build

Answer 1

两个主要观察:

有两个非常大 (3+MB) 的 jpg 图像，我建议您看看如何使用图形程序进行优化，即使是像预览 (MacOS) 这样的简单图像，通过缩小尺寸或其他方式。这两个是“避免巨大的网络有效负载”报告中的最大问题，但您也可以考虑优化其他问题。

React(或其他静态)应用程序的本地服务通常给我的性能比我通常部署的环境差得多 CDN .所以在这一点上，我主要针对已部署的环境运行 Lighthouse，至少对于性能报告。特别是，支持 HTTP/2、提供缓存 header 且通常为性能而构建的环境(相对于通常未为此目的优化的本地服务器)可能值得考虑，以获得更好地反射(reflect)事物外观的结果在生产中。

Lighthouse 试图在指出细节方面做得很好，因此一旦您在类似生产的环境中运行它(如果您选择这样做)，我建议您仔细查看其他部分，点击“了解更多”链接困惑的地方，并根据 Lighthouse 提供的建议查看可以进一步优化的地方。

希望有帮助!