Vue 라우터는 초기 로딩 시 항상 느리게 로드된 모듈을 로드합니다.

Vue 라우터는 초기 로딩 시 항상 느리게 로드된 모듈을 로드합니다.

다음은 Vue 공식 라우터를 사용한 느린 로드 구현입니다.

src/srec/index.displacy

import Vue from "vue";
import VueRouter from "vue-router";

const Foo = () => import("@/components/Test2");

const Bar = () => import("@/components/Test");

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      component: Bar
    },
    {
      path: "/test2",
      name: "test2",
      component: Foo
    }
  ]
});

src/main.disples

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount("#app");

루트는 예상대로 동작하지만 느린 로딩이 제대로 작동하지 않습니다.첫 번째 로딩 시 네트워크 탭을 검사하면 웹 팩이 느리게 로드된 파일을 볼 수 있습니다.

문제는 webpack preloadplugin이 모든 비동기 청크에 프리페치태그를 추가하는 것입니다.이를 방지하려면 vue.config.js에 다음을 추가하십시오.

  chainWebpack: config => {
    config.plugins.delete('prefetch');
  }

출처 : https://github.com/vuejs/vue-cli/issues/979#issuecomment-373027130

네가 좀 잘못하고 있는 것 같은데..

청크 분할을 활성화하고 루트의 컴포넌트를 느리게 로드하는 경우 접근 방식은 다음과 같습니다.

src/srec/index.displacy

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      component: () => import(/* webpackChunkName: "bar" */ '@/components/Test.vue')
    },
    {
      path: "/test2",
      name: "test2",
      component: () => import(/* webpackChunkName: "foo" */ '@/components/Test2.vue')
    }
  ]
});

그러면 이름이 지정된 개별 청크가 생성됩니다.'bar'그리고.'foo'입력된 경로에서만 지연 로드됩니다.

언급URL : https://stackoverflow.com/questions/54309478/vue-router-always-loads-the-lazy-loaded-modules-on-intial-loading