使用 nuxt SSR 页面加载非常缓慢答案

【问题标题】：Page loads very slowly with nuxt SSR使用 nuxt SSR 页面加载非常缓慢
【发布时间】：2021-04-11 23:45:45
【问题描述】：

我的项目将 nuxt.js 与 Firebase 结合使用。我使用 nuxt/Firebase 包。我有很多页面使用 asyncData 或 fetch 从 Firebase 数据库和存储中获取数据，例如博客文章、分类广告等一切正常，我使用 nuxt head 属性添加了元标记。但是，显示任何内容之前的页面加载时间超过 5 秒。我尝试将一些与经过身份验证的用户相关且 SEO 不需要的页面包装在仅限客户端的标签中，但我没有看到任何改进。当我在生产中部署我的应用程序时，这一切都会发生。我使用 Firebase 托管。

有谁知道我如何对我知道的相同内容进行 SSR，但会增加页面加载时间。这是来自 chrome devtools 中灯塔选项卡的报告。它说一些 css 是一个渲染阻塞资源。

【问题讨论】：

页面加载时间取决于很多因素，不幸的是，没有任何技巧或单一配置设置可以神奇地加快速度......如果您使用的是 chrome，您可以前往 Performance开发工具中的选项卡并记录生产中页面的加载配置文件，然后截取结果并使用图像更新您的问题。这样人们就可以看到问题所在并提出改进建议。
我确实上传了灯塔报告的截图。
在屏幕截图中看到“查看原始轨迹”？这就是我们正在寻找的信息:)
好的。我也添加了。

标签： firebase nuxt.js firebase-hosting nuxtjs

【解决方案1】：

好的。通过在 nuxt.config.js 文件中进行设置，我设法将页面加载速度提高了至少 100%

   vuetify: {
    optionsPath: './vuetify.options.js',
    defaultAssets: {
      icons: false
    }
  },

那么你应该像这样在本地导入材质图标：

import { mdiPlusCircle } from '@mdi/js'
data() {
 return: {
  addCircleIcon: mdiPlusCircle,
 }
}

然后你可以像这样在你的模板中使用这个 addCircleIcon：

<v-icon> {{ addCircleIcon }}</v-icon>

所以现在我不是从 cdn 加载 Material Design 图标（这是默认的 vuetify 行为），而是在本地执行，它不会阻止页面的初始渲染。

还将 vuetify 的 treeshake 选项设置为 false 提高网站加载速度。

【讨论】：

Also setting vuetify's treeshake option to false increase site loading speed - 等等，什么？

【解决方案2】：

尝试使用lazy-hydration
将应用程序分解为组件
为组件添加 v-if 条件

【讨论】：