延迟路由被预取，忽略 webpack 魔术注释（Vue）答案

【问题标题】：Lazy Route gets prefetched, ignoring webpack magic comments (Vue)延迟路由被预取，忽略 webpack 魔术注释（Vue）
【发布时间】：2020-08-23 14:39:06
【问题描述】：

我需要开发一个带有登录视图的服务器端身份验证应用程序。如果我想使用 Vue Router 在登录和索引（受保护的视图）之间动态切换，我需要避免登录视图在成功认证之前下载（预取）索引，因为如果没有，服务器会以登录页面响应索引预取请求。

我试图在具有两条路由的原始 Vue 路由器示例中实现这一点。家和周围。第一个包含在内，第二个是延迟加载（但预取），这将是实际应用程序中的受保护页面。

为了避免预取，我已经尝试了我找到的所有 webpack 魔法 cmets，但预取仍在进行中。

代码如下：

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;

结果如下：

我不想从常规 webpack 配置中禁用该功能，因为我希望它用于其余的应用程序链接。我只想为这个链接禁用它。

我应该如何配置路由器来实现呢？

感谢您的宝贵时间，

H25E

【问题讨论】：

您是否尝试过将这些组合成一条评论，例如import(/* webpackPrefetch: false, webpackPreload: false, webpackChunkName: "about" */ "../views/About.vue")？
是的，并且只包括 /*webpackPrefetch: false*/。结果总是一样的。这有点令人沮丧。唯一的区别是“about.js”被预取为“0.js”。所以我认为 cmets 没有正确解析。
你或许可以在这里找到答案——github.com/vuejs/vue-cli/issues/979
我以前读过这篇文章，但我不知道如何解释来自：fileBlacklist: [ /\.map$/ ] 的“/\.map$/”，我需要地图文件吗？
这个 glob 模式简单地说明了哪些文件不应该被预取。在给定的示例中，不会预取 MAP 文件，但您可以添加自己的 glob 模式。

标签： vue.js webpack vue-router prefetch

【解决方案1】：

discussion on Github 提供了一些与您的情况相关的提示。

// vue.config.js

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

Vue-CLI 默认自动预取所有动态导入 - 所以你必须添加一个黑名单。

Webpack 的魔法 cmets（webpackPrefetch 可能还有 webpackPreload）接受 true 或数字（索引） - 但不接受 false 参数。

【讨论】：