如何使用 Vue CLI 4.3 默认禁用链接（异步模块）预取/预加载？

Posted 2023-02-22

【中文标题】如何使用 Vue CLI 4.3 默认禁用链接（异步模块）预取/预加载？

【英文标题】：How disable link (async module) prefetch / preload by default with Vue CLI 4.3?

【发布时间】：2020-09-20 19:50:07

【问题描述】：

如何在动态路由导入中禁用 rel="prefetch"？

我正在使用@vue/cli 4.3.1 和 Webpack 4.43.0，试图禁用预取：

在 route.js 中

const Registration = () => import(  /* webpackPrefetch: false */
    /* webpackChunkName: "registration" */ '../modules/Popup/Registration.vue')

尝试在 vue.config.js 中配置，但没有帮助

chainWebpack: config => 
  config.plugins.delete('prefetch')
  config.plugins.delete('prefetch-index') // or
  config.plugins.delete('preload')

但无论如何都有

<link rel="prefetch" ....>

【问题讨论】：

或 const Registration = () => import( /* webpackPrefetch: -999 / / webpackChunkName: "registration" */ '../modules/Popup/Registration. vue') 没有帮助

这里有同样的问题。你找到解决办法了吗？

没有找到解决办法

如果你使用 s-s-r，它可以在 createBundleRenderer 中配置 - s-s-r.vuejs.org/api/#shouldprefetch

【参考方案1】：

Vue CLI documentation for Preload 状态：

默认情况下，Vue CLI 应用会自动生成预取提示 对于为异步块生成的所有 javascript 文件（由于 通过动态 import()) 按需进行代码拆分。

提示是使用@vue/preload-webpack-plugin 注入的，可以是 通过chainWebpack修改/删除为config.plugin('prefetch')。

多页面设置注意事项

使用多页设置时，应更改上述插件名称 匹配结构“prefetch-pagename”，例如 '预取应用'。

有an issue opened，因为这个记录在案的解决方案已经过时了。

但是，由于plugins 属性的结构已更改，因此只需稍作修改即可工作的解决方案。这是一个使用多页设置详细说明的示例：

// File: vue.config.js

// Loading app's default title from a custom property in package.json
const  title  = require('./package.json');

module.exports = 
  // You may omit this 'pages' property if not using multipage setup
  pages: 
    app: 
      title,
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      excludeChunks: ['silentRenewOidc'],
    ,
    silentRenewOidc: 
      entry: 'src/silentRenewOidc.ts',
      template: 'public/silent-renew.html',
      filename: 'silent-renew.html',
      excludeChunks: ['app'],
    ,
  ,
  chainWebpack: (config) => 
    // Disable prefetch and preload of async modules for 'app' page
    config.plugins.store.delete('prefetch-app');
    config.plugins.store.delete('preload-app');
    // Use this syntax if not using multipage setup
    // config.plugins.store.delete('prefetch');
    // config.plugins.store.delete('preload');
  ,
;