javascript - Vue 路由器总是在初始加载时加载延迟加载的模块

Question

这里是使用Vue官方路由实现的懒加载

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

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

路由按预期工作，但是延迟加载无法正常工作，当我在第一次加载时检查网络选项卡时，我可以看到 web pack 生成的延迟加载文件

Answer 1

问题是 webpack preloadplugin 向所有异步 block 添加了预取标签。为防止这种情况，请将以下内容添加到您的 vue.config.js

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

来源: https://github.com/vuejs/vue-cli/issues/979#issuecomment-373027130