使用nuxt SSR加载页面非常慢

Question

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

Answer 1

1. 尝试使用惰性水合作用
2. 将应用程序分解为多个组件
3. 向组件添加v-if条件

Answer 2

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

   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，以提高站点加载速度。