Estoy tratando de cargar los componentes de Vue 3 de forma asíncrona. He encontrado que hay una función llamada

 defineAsyncComponent

que se supone que se usa de la siguiente manera:

 const GameUI = defineAsyncComponent(()=>import(filePath)); app.component("GameUI", GameUI);

filePath en este contexto es exactamente: './components/GameUI/GameUI.element.vue'

Ejecutar la aplicación de esta manera genera el siguiente error:

 Uncaught (in promise) Error: Cannot find module './components/GameUI/GameUI.element.vue' at eval (eval at ./src lazy recursive)

Pero... si cambio el código filePath para importar la ruta como una cadena:

 const GameUI = defineAsyncComponent(()=>import('./components/GameUI/GameUI.element.vue'));

La aplicación funciona, encuentra el componente.

No quiero usar cadenas constantes porque tengo muchos componentes y quiero cargarlos de forma asíncrona.

Uno de mis principales objetivos para lograr esto es cargar la aplicación web por partes, componente por componente cuando sea necesario, en lugar de cargarlos todos al inicio.

También encontré que si agrego un comentario de la siguiente manera:

 const GameUI = defineAsyncComponent(()=>import(/* webpackChunkName: "GameUI" */ './components/GameUI/GameUI.element.vue'));

La parte de JavaScript para el componente GameUI debería tener su propio archivo chunk.js , pero siempre obtengo todo en un par de archivos .js chunk, lo que contradice la carga asíncrona que quiero lograr.

Estoy usando vue-cli-service y mi vue.config.js se ve así:

 module.exports = { productionSourceMap: false, css: { loaderOptions: { sass: { additionalData: process.env.NODE_ENV === 'production' ? '$baseURL:"/dist/";' : '$baseURL:"/";' } } }, publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', devServer: { https: true, port:"", host:'website.com', disableHostCheck: true, cert: (fs.readFileSync('cert.pem')+""), key: (fs.readFileSync('privkey.pem')+""), ca: (fs.readFileSync('ca.pem')+""), } };

Ya probé varias cosas que encontré en línea, pero no son tan explicativas. Literalmente estoy haciendo lo mismo que algunos artículos en línea que encontré y no puedo encontrar el problema de mi parte.

Los dos problemas principales son:

• No se pueden cargar archivos .vue desde variables, solo cadenas completas.
• No se puede dividir el código en diferentes archivos .js para cada componente cargado asíncrono.