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

Question

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

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

Answer 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 加载材料设计图标，这是默认的 vuetify 行为，我在本地执行它并且它不会阻止页面的初始渲染。

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

Answer 2

1. 尝试使用lazy-hydration
2. 将应用程序分解成组件
3. 向组件添加 v-if 条件