vue3项目，在生产环境，跳转到pdf页面会先请求vue3-pd

在项目中，vue3项目，在生产环境，会先请求vue3-pdf-app插件js，但pdf组件又特别的大，导致页面跳转时间特别的长，暂时没有在打包上优化，仅优化，跳转到pdf页面后，再请求pdf插件资源

调用pdf

<template>
 
    <vue-pdf-app style="height: 100vh" :pdf="src"></vue-pdf-app>

</template>
<script setup lang="ts">

import 'vue3-pdf-app/dist/icons/main.css'
import { useLoading } from '@/utils/loading'
import { getPicById } from '@/api/common'
import { createAsyncComponent } from '@/utils/factory'
//路由
const route = useRoute()
const { id } = route.query

//pdf组件
let VuePdfApp: any = reactive({})
//为了避免组件提前预加载导致路由跳转时间长的问题，这里采用异步加载组件
VuePdfApp = defineAsyncComponent(() => import('vue3-pdf-app'))
//pdf插件资源很大，在生产环境会响应非常慢，这里判断组件是否加载好，然后添加loading
const asyncComponentLoader = createAsyncComponent(() => import('vue3-pdf-app'))
useLoading.open()
asyncComponentLoader().then(() => {
  useLoading.close()
})

//获取数据
const src = ref<string>('')
const getData = () => {
  getPicById({ id }).then(res => {
    if (res) {
      src.value = res.pdfurl
    }
  })
}
getData()
</script>

注意这里useLoading是自己封装的loading，可以自己直接调ui的loading

createAsyncComponent 方法

import { Component } from 'vue'

type LoaderFn = () => Promise<Component>

export function createAsyncComponent(loader: LoaderFn) {
  let component: Component | null = null

  return () => {
    if (!component) {
      return loader().then(c => {
        component = c
        return component
      })
    } else {
      return Promise.resolve(component)
    }
  }
}