Lighthouse 反应应用程序的性能改进

Question

我通过 chrome 开发工具在页面上运行了灯塔审核，并得到了非常差的性能评级...

未使用的 JavaScript 代码导致分数下降。

未使用的 JS 主要是节点模块函数和节点模块中 JS 文件中存在的注释掉代码。下面是一个例子：

LightHouse 评分：如果您看到最大的内容绘制，交互时间和速度指数都很差，是什么原因造成的？我几乎什么都不做..

我们如何处理这些未使用的影响性能的Javascript代码？ 谢谢！

我已经从应用程序中卸载了未使用的节点模块和开发依赖项。

Answer 1

1. 使用代码拆分：使用动态导入（React.lazy 和 Suspense）拆分 React 代码，仅在必要时加载组件。

2. 使用 ImageOptim 等工具或 Cloudinary 等服务压缩和优化图像。

3. 删除未使用或无效的 JavaScript。

4. 确保组件仅在必要时重新渲染。您可以使用 React.memo、useCallback 和 useMemo 来优化渲染周期。