Vue 3 import all js files for all vue components on first load project. i want vue to import only required files. for example if i open contact page vue 3 should import only contact.js file. Right now it is import all those files
<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">
These my index router file :
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;
and thanks for help in advanced.
You should disable preloading/prefetching in vue.config.js:
module.exports =
{
chainWebpack: config =>
{
config.plugins.delete('prefetch'); // for async routes
config.plugins.delete('preload'); // for CSS
return config;
}
};