如何使用 SSR 提高 Nuxt 的速度性能

Question

我们如何通过 SSR 提高 Nuxt 的速度性能有以下几点。

• 减少未使用的 JavaScript
• 避免为现代 JavaScript 提供遗留服务
• 最小化主线程工作
• 减少 JavaScript 执行时间
• 避免巨大的网络负载

Answer 1

非常普遍的问题，所以让我们逐点讨论：

• 减少未使用的 JavaScript：您可以对代码进行树摇晃（+第 3 方）+ 延迟加载您的路由 +组件（Nuxt 做得很好）
• 避免向现代提供遗留 JavaScript：现代属性对此很有好处
• 最大限度地减少主线程工作：谨防繁重的第 3 方脚本，例如 Google Analytics/GTM、繁重的聊天、繁重的操作等。使用 Service Worker 会有所帮助，其他您也可以尝试Partytown
• 减少 JavaScript 执行时间：同样，取决于您的代码。需要对其进行更多分析
• 避免巨大的网络负载：检查您是否进行大量 HTTP 调用或加载大 5MB 的 i18n JSON 文件

与往常一样，您无法对此类主题给出快速而简单的答案。您要么需要性能专家，要么自己调试/学习。
这是一个很好的开始，您可以获得很多关于核心网络生命周期的解释。

这个前端清单也始终是一篇值得阅读的好文章。

PS：另外，如果问题主要是SSR，那么可能归结为后端有更好的基础设施，有更庞大的VPS服务器，一些改进的数据库，也许一些Elasticsearch，一些缓存等等......（所有常见的东西你都可以改进后端）