Why vue 3 import all js files for all pages on first load project

Question

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.

IVO GELOV · Accepted Answer · 2022-01-13 16:06:37Z

2

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;
  }
};

answered Jan 13, 2022 at 16:06

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why vue 3 import all js files for all pages on first load project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related