Question

我有一个 Vue/Nuxt 网络应用程序，其中页面是从许多具有子组件的组件动态生成的。

问题是页眉和页脚先被渲染，然后是具有实际内容的子组件。这在第一次加载时看起来很糟糕，Lighthouse 不喜欢它。这是 Avoid large layout shifts 失败。对于上下文来说，这只是客户端渲染时的一个问题，SSR会在引入其他问题的同时消除这个问题。

我能做的是编辑项目中的每个组件并在mounted上添加一个事件。然后可以使用它来决定何时显示布局。问题是这会很麻烦，并且会在添加新组件而忘记这一点时导致错误。

我在 Vue 和/或 Nuxt 中找不到任何通用的解决方案。我很想拥有一个新的 allMounted 生命周期钩子，它只会在子组件也被挂载但它不存在时触发。即使那样也会有点hacky。一个更通用的 render when all components are mounted 选项会很棒。

Answer 1

我不确定 dynamic component 对您的情况是否有帮助，但我猜您的 company's website 不会真正从中受益。确实，内容跳转的问题还是会存在IMO。

<component :is="currentTabComponent"></component>

我仍然认为您的内容是高度静态的 IMO，您甚至可以切换到 full static 以获得最佳性能优势，而不必在 SPA 加载所有内容时等待很长时间 (TTFB) .当然，让一切看起来都很好（水化之前/之后）可能更具挑战性。

此外，您应该了解容器的大致尺寸。在这种情况下，您可以使用一些 skeletons 甚至一个 prototyping font 来直观地填充块。

如果您不同意或认为这是不可行的，您仍然可以使用this solution

<child-component @hook:mounted="makeSomeStuff"></child-component>

这样您就可以显示一个全尺寸的加载器，直到您的内容加载完毕。您可以在每个组件中添加具有更长 mounted 语法的 a mixin 以避免太多样板，但这个已被弃用，并且确实有 various issues。

但是 IMO，问题更多在于您获取数据的方式（asyncData 和 fetch 钩子很好）以及在没有特定需要时一切都是完全动态的方式。如果保持动态部分更重要，我想您可以认真对待代码审查或插入一些 git 钩子或类似的东西来扫描代码并查看所需的 mounted 发出是否到位。

在您的情况下没有理想的解决方案，但请记住，Lighthouse 总是更喜欢一些具有较少 JS 的 SSR 内容。这是我对任何性能相关的personal bible，您可能会在这篇非常深入的文章中掌握一些不错的技巧。