Vue 3禁用懒加载路由预加载遇阻？含组件导入错误修正

一、动态导入组件写法错误导致懒加载失效 #

我的问题源于动态导入组件时的写法错误。
错误写法：

const ShoppingCart = import(/* webpackPrefetch: true */'../cart/ShoppingCart.vue')

正确写法：

const ShoppingCart = () => import(/* webpackPrefetch: true */'../cart/ShoppingCart.vue')

这一错误导致组件文件总是被立即加载，而非懒加载。

二、无法禁用懒加载路由预加载的问题 #

我尝试寻找禁用懒加载路由预加载的方法，Vue CLI文档建议通过移除或修改prefetch插件来解决，代码示例如下：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除prefetch插件
    config.plugins.delete('prefetch')

    // 或者：
    // 修改插件选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

但执行vue inspect命令时并未发现该插件，因此按照文档建议移除它没有任何效果。

相关旧讨论：

• 如何禁用/自定义prefetch插件的文档说明
• 路由访问前懒加载代码块已被下载的问题

内容的提问来源于stack exchange，提问作者Jim Cooper