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 包生成的延迟加载文件

Answer 1

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

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

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

Answer 2

我相信你做的有点不对..

如果您想启用块拆分，然后延迟加载路由的组件，您的方法应该看起来像这样：

src/router/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' 的单独块，仅在输入的路由上才会延迟加载。