Vue 3 importa todos los archivos js para todos los componentes de vue en el primer proyecto de carga. quiero que vue importe solo los archivos necesarios. por ejemplo, si abro la página de contacto vue 3, debería importar solo el archivo contact.js. En este momento es importar todos esos archivos.

 <link href="/js/contact.js" rel="prefetch"> <link href="/js/forgot.js" rel="prefetch"> <link href="/js/signin.js" rel="prefetch"> <link href="/js/signup.js" rel="prefetch"> <link href="/js/app.js" rel="preload" as="script"> <link href="/js/chunk-vendors.js" rel="preload" as="script">

Este es mi archivo de enrutador de índice:

 import { createRouter, createWebHistory } from "vue-router"; import Home from "../views/Home.vue"; import store from "../store"; import {authConstants} from "../_constants"; const routes = [ { path: "/", name: "Home", component:()=>Home, }, { path: "/contact", name: "contact", component: () => import(/* webpackChunkName: "contact" */ "../views/contact.vue"), }, { path: "/signin", name: "signin", component: () => import(/* webpackChunkName: "signin" */ "../components/auth/signin.vue"), }, { path: "/signup", name: "signup", component: () => import(/* webpackChunkName: "signup" */ "../components/auth/signup.vue"), }, { path: "/recoverpassword", name: "recoverPassword", component: () => import(/* webpackChunkName: "forgot" */ "../components/auth/recoverPassword.vue"), }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, scrollBehavior() { // document.getElementById("app").scrollIntoView(); }, }); router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!store.getters[authConstants.GET_USER_DATA]) { next({ name: 'signin' }) } else { next() // go to wherever I'm going } } else { next() // does not require auth, make sure to always call next()! } }) export default router;

y gracias por la ayuda por adelantado.