减少React构建中的Lighthouse“第一个有意义的油漆”

Question

我有React应用程序，可以在主页上渲染很多图像。

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

1. 在各处使用react-lazy-load-image-component。
2. lazy，Suspense用于反应路线。
3. 配置多个压缩插件：

  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

两个主要观察结果：

1. [我建议您看两张非常大（3 + MB）的jpg图片，以了解如何通过减小尺寸或其他方式来优化图形程序，甚至是诸如Preview（MacOS）之类的简单图形程序。这两个是“避免巨大的网络负载”报告中的最大问题，但您也可以考虑优化其他问题。
2. [React（或其他静态）应用程序的本地服务通常会使我的性能大大低于CDN之后的常规部署环境。因此，至此，我主要是针对已部署的环境运行Lighthouse，至少是针对Performance报告。特别是，支持HTTP / 2，提供缓存头并且通常是为提高性能而构建的环境（与通常没有为此目的而优化的本地服务器相比）可能值得考虑，以获得更好地反映事物外观的结果在生产中。

灯塔会尽力指出细节，因此，如果要在类似生产环境中运行它（如果您选择这样做），我建议您仔细阅读其他部分，点击“了解更多”链接，以防万一，使您感到困惑，并根据Lighthouse提供的建议查看可以在何处进一步优化。

希望有帮助！