Vue CLI 5项目如何开启Prefetch？多种尝试后仍未生效

问题根源 #

你之前的无效操作是因为用了Webpack已废弃的webpack.PrefetchPlugin，且@vue/preload-webpack-plugin的配置没适配Vue CLI 5+Webpack 5的环境。

方案一：全局配置所有异步Chunk的Prefetch #

1. 先安装依赖插件

npm install @vue/preload-webpack-plugin --save-dev

2. 修改vue.config.js的配置

const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new PreloadWebpackPlugin({
        rel: 'prefetch', // 指定预获取类型
        include: 'asyncChunks', // 对所有异步Chunk开启Prefetch
        // 可选：如果只想给特定Chunk开启，比如购物车的chunk，可换成include: ['cart']（注意chunk名要和打包后一致）
        fileBlacklist: [/\.map$/, /hot-update\.js$/] // 排除不需要预获取的文件
      })
    ]
  }
}

方案二：给单个路由手动开启Prefetch #

如果不想全局配置，只给购物车路由加Prefetch，直接在动态导入时加注释即可，不需要额外配置插件：

// 注释里的webpackPrefetch: true会告诉Webpack自动生成Prefetch链接
const ShoppingCart = () => import(/* webpackPrefetch: true */ '../cart/ShoppingCart.vue')

验证是否生效 #

打包项目后，打开dist/index.html，查看是否有类似下面的标签：

<link rel="prefetch" href="js/cart.[hash].js">

或者在浏览器开发者工具的Network面板里，观察页面加载完成后是否自动请求了购物车对应的chunk文件。

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