Nuxt中Lazy加载组件首次打开过慢问题求助

在Nuxt的默认布局里，我用Lazy前缀懒加载引入了多个弹窗组件。首次打开任意弹窗时加载特别慢，之后再打开速度就正常了，但页面重载后问题又会出现。试过用<keep-alive>包裹懒加载组件，也试过去掉部分组件的Lazy标识，都没解决，想让所有弹窗打开速度一致。相关代码如下：

<template>
      <LazyModalsProduct v-if="catalogStore.isShowProductModal" />
      <LazyModalsChooseDiscount v-if="isShowChooseDiscountModal" />
      <LazyModalsCart v-if="isShowCartModal" />

      <LazyModalsPopup
      v-if="isShowPopupModal"
      />

      <LazyModalsHeaderInfoMenu
      v-if="isShowMobileMenu"
      />

      <LazyModalsFilters
        v-if="isShowFiltersModal"
      />

      <LazyModalsOrder
        v-if="isShowOrderModal"
      />
</template>

<script setup>
const isShowAuthModal = computed(() => commonStore.isShowAuthModal);
const isShowSettingsModal = computed(() => commonStore.isShowSettingsModal);
const isShowAcceptCityModal = computed(() => commonStore.isShowAcceptCityModal);
const isShowDeliveryTypeModal = computed(() => commonStore.isShowDeliveryTypeModal);
const isShowPopupModal = computed(() => commonStore.isShowPopupModal);
</script>

• 提前预加载所有弹窗组件
  在布局的onMounted钩子中主动加载所有弹窗组件，页面加载完成后就把组件资源准备好，首次打开弹窗不会再等待加载：

import { onMounted } from 'vue'

onMounted(async () => {
  // 替换成你实际的组件路径
  await Promise.all([
    import('~/components/ModalsProduct.vue'),
    import('~/components/ModalsChooseDiscount.vue'),
    import('~/components/ModalsCart.vue'),
    import('~/components/ModalsPopup.vue'),
    import('~/components/ModalsHeaderInfoMenu.vue'),
    import('~/components/ModalsFilters.vue'),
    import('~/components/ModalsOrder.vue')
  ])
})

• 把所有弹窗打包到同一个代码块
  如果每个弹窗单独打包成一个chunk，首次打开时要请求多个文件，会拖慢速度。可以在nuxt.config.ts里配置Vite，把所有弹窗组件合并到同一个chunk中：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            modals: [
              '~/components/ModalsProduct.vue',
              '~/components/ModalsChooseDiscount.vue',
              '~/components/ModalsCart.vue',
              '~/components/ModalsPopup.vue',
              '~/components/ModalsHeaderInfoMenu.vue',
              '~/components/ModalsFilters.vue',
              '~/components/ModalsOrder.vue'
            ]
          }
        }
      }
    }
  }
})

这样首次打开任意弹窗时，会一次性加载所有弹窗的代码块，后续打开其他弹窗就不会再触发请求了。

• 检查弹窗组件内部的耗时操作
  有时候慢不是懒加载的锅，而是弹窗组件自身在初始化时执行了大量同步逻辑（比如复杂数据计算、大量DOM操作、同步接口请求）。可以把这些逻辑改成异步执行，比如用nextTick或者setTimeout包裹，避免阻塞组件渲染：

// 弹窗组件内部的script示例
onMounted(() => {
  // 把耗时逻辑放到nextTick里，让组件先渲染完成
  nextTick(() => {
    // 执行复杂计算或DOM操作
  })

  // 或者用setTimeout延迟执行非紧急逻辑
  setTimeout(() => {
    // 执行非必须立即完成的操作
  }, 0)
})

内容的提问来源于stack exchange，提问作者Tim Miller