如何使用 Light House 检查 Flutter Web 应用程序的性能？答案

【问题标题】：How to check flutter web app performance using light house?如何使用 Light House 检查 Flutter Web 应用程序的性能？
【发布时间】：2021-09-01 22:14:47
【问题描述】：

灯塔显示了 Flutter Web 应用程序的性能指标。但是有没有办法解决这些问题？因为这些问题与从 dart 编译的 js、css、HTML 文件有关。

那么我们如何在 Flutter Web 应用中解决这些问题呢？请帮忙

【问题讨论】：

我们无法真正帮助您，因为您没有提供有关您面临的问题等的信息。但从本质上讲，flutter web 应用程序和其他任何东西之间没有太大区别，如果它说您的总阻塞时间（TBT）很高，那么您需要优化您的 JS，如果图像过大然后调整它们的大小等。我会花一点时间了解每个报告项目（诊断和机会下的位），然后询问更多关于您不确定的项目的具体问题。
但是在 Flutter Web 中，我们得到的是 dart 转换的 js 文件......所以我们没有编辑这些文件的选项吗？？
所以唯一的区别是你必须编辑你的 dart 代码而不是 JS。 Dart 被编译为 JS，所以如果它说“删除未使用的 JS”，你会找到没有用于页面加载的相关 JS，在 Dart 中找到等效代码，然后在那里进行代码拆分。这只是一个额外的步骤，所有相同的原则都适用。

标签： flutter flutter-web lighthouse

【解决方案1】：

本网站是专门为帮助那些希望提高网络性能的人而设计和涵盖的。

查看 web.dev (https://web.dev/lighthouse-best-practices/)，了解有关网络生命力、其他资源、最佳实践以及如何提高网络性能的更多信息。

我希望这可以帮助您提高 Flutter Web 应用程序的性能，如果有，请回复并分享您是如何改进它的。

已编辑： 因此，在这种情况下，您可以共享灯塔报告。大多数时候，您可以看到错误消息是什么，然后用谷歌搜索它。你可以从中得到一些想法。

目前我只浏览了这个网站，甚至我也很想知道是什么让你提高了报告分数以及如何提高成绩？找到有效资源后，也在这里分享。

再次编辑 嗨，我从 stackoverflow 电子邮件订阅中获得了此资源。我希望你也明白了。如果没有，请查看此 (https://calibreapp.com/blog/lighthouse-8)

【讨论】：

感谢兄弟的回答...但是这个解决方案纯粹是针对使用 js、HTML 和 CSS 开发的网络应用程序...但是在我的情况下，js 文件是从 dart 编译的...所以我无权访问js文件...那么兄弟还有其他方法吗？？
如果我找到了，我一定会分享...无论如何谢谢..