Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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;
  }
};
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!