为什么 vue 3 在第一次加载项目时导入所有页面的所有 js 文件

Question

Vue 3 在第一次加载项目时导入所有 vue 组件的所有 js 文件。我希望 vue 只导入所需的文件。例如，如果我打开联系页面，vue 3 应该只导入 contact.js 文件。现在它正在导入所有这些文件

<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">

这些我的索引路由器文件：

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;

并感谢您的帮助。

Answer 1

您应该在 vue.config.js:

中禁用 preloading/prefetching

module.exports =
{
  chainWebpack: config =>
  {
    config.plugins.delete('prefetch'); // for async routes
    config.plugins.delete('preload'); // for CSS
    return config;
  }
};

为什么 vue 3 在第一次加载项目时导入所有页面的所有 js 文件

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

html

javascript

vuejs3