Firebase 使用nuxt SSR加载页面非常慢

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

有人知道我如何SSR相同的内容，因为我知道，但增加页面加载时间。 这是来自chrome开发工具中lighthouse选项卡的报告。它说一些css是一种渲染阻塞资源。

---

好的。通过在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>

{{addCircleIcon}

因此，现在我不再从cdn加载材质设计图标（这是默认的vuetify行为），而是在本地加载，并且不会阻止页面的初始呈现

还将vuetify的treeshake选项设置为false，以提高站点加载速度

尝试使用

将应用程序分解为多个组件

向组件添加v-if条件

---

页面加载时间取决于很多事情，不幸的是，没有一个技巧或单一的配置设置可以神奇地加快速度。。。如果您使用的是chrome，您可以转到开发工具中的“性能”选项卡，在生产环境中记录页面的负载配置文件，然后截图并用图像更新您的问题。这样人们就可以看到问题所在并提出改进建议。我确实上传了灯塔报告的屏幕截图。看到屏幕截图上写着“查看原始跟踪”吗？这就是我们要找的信息：）好的。我也加了一句。