Lazy Route gets prefetched, ignoring webpack magic comments (Vue)

user_10551132 0
Viewed 1735

I need to develop an application with server side authentication with a login view. If I want to use Vue Router to dynamically switch between login and index (the protected view), I need to avoid login view downloading (prefetching) index before succesful authentication, because if not, server will answer with the login page to the index prefetching request.

I'm trying to achieve this in the original Vue Router example that has two routes. Home and about. The first one is included and the second one is lazy loaded (but prefetched) which would be the protected page in the real application.

In order to avoid prefetching I have tried all the webpack magic comments I have found, but the prefetching is still hapenning.

Here is the code:

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about"*/ /* webpackMode: "lazy" */ /* webpackPrefetch: false */ /* webpackPreload: false */ "../views/About.vue")
  }
];

const router = new VueRouter({
  routes
});

export default router;

And here the result:

network result

I don't want to disable the feature from the general webpack configuration because I want it for the rest of the application links. I want to disable it only for this link.

How I should configure the router to achieve it?

Thanks for your time,

H25E

vue-router vue.js webpack prefetch
1 Answers

There is a discussion on Github which offers some tips relevant to your situation.

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('prefetch').tap(options => {
      options.fileBlackList.push([/MyChunkName(.*)\.js$/]);
      return options;
    });
  }
};

Vue-CLI by default automatically prefetches all dynamic imports - so you have to add a blacklist.

The magic comments for Webpack (webpackPrefetch and probably webpackPreload too) accept either true or a number (index) - but do not accept false argument.

user_59628020
Related