Vue router всегда загружает ленивые загруженные модули при начальной загрузке - PullRequest
Новая
       27

Vue router всегда загружает ленивые загруженные модули при начальной загрузке

0 голосов
/ 22 января 2019

Вот реализация с отложенной загрузкой, использующая официальный маршрутизатор Vue

SRC / маршрутизатор / index.js 

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

ЦСИ / main.js 

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

Маршруты работают должным образом, однако ленивая загрузка не работает должным образом, когда я проверяю вкладку сети при первой загрузке, я могу видеть, что веб-пакет генерирует лениво загруженные файлы

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Проблема заключается в том, что prepackplugin в веб-пакете добавляет тег предварительной выборки ко всем асинхронным фрагментам.Чтобы предотвратить это, добавьте следующее в ваш vue.config.js 

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

Источник: https://github.com/vuejs/vue-cli/issues/979#issuecomment-373027130

0 голосов
/ 22 января 2019

Я полагаю, вы делаете это немного неправильно ..

Если вы хотите включить разбиение на куски, а затем отложенную загрузку компонента для маршрута, ваш подход должен выглядеть примерно так:

SRC / маршрутизатор / index.js 

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', которые будут загружаться только при вводе маршрута.

...