这是 Google 开发人员自己提供的免费在线 Lighthouse 树状图可视化工具。这是一个简单的网站，它获取 Lighthouse 审核期间生成的 JSON 报告并生成您可以分析的树状图。它创建不同的块和分区，以向您展示网站或网页上的脚本如何工作。通过分析脚本的大小和使用状态，您可以做出进一步的决策来优化您的网站。Lighthouse 树图在您的网站上生成 JS 捆绑包的可视化。它与源映射兼容，非常适合理解网页使用的大型 JavaScript 模块。除此之外，它还可以帮助您可视化某些资源未使用的字节。我在这里提到的工具可以让您看到任何网站的这一点，前提是您有扫描的 JSON 报告。如何使用本网站生成灯塔树状图？为了使用此树状图可视化工具，您无需在任何地方注册或注册。您所要做的就是访问此网站 点击此处 然后只需上传 JSON 报告。如果您有 Lighthouse 生成的先前报告，则可以在此处使用它。如果您没有 JSON 报告，则可以生成一个。只需在浏览器中打开 DevTools 并在任何网站上运行 LH 音频。生成报表后，导出 JSON 报表。现在，您只需在此网站上上传生成的 JSON 报告。它将立即生成一个您可以分析的树状图。单击任何块以查看有关它的更多详细信息。分析区块后，您可以单击一下切换回表格。这样，您可以使用这个简单而强大的工具来生成和分析灯塔树状图。过程很简单，这个工具是开源的。如果需要，您可以随时托管自己的实例。最后的想法：如果您是 Web 开发人员，尤其是前端开发人员，那么您可能会喜欢这个工具的简单性。在您拥有的任何 LH 报告上使用它并查看树状图。它可以帮助您极大地识别哪些 JS 资源需要优化，以使网站快速可靠。
