Vue路由懒加载-prefetch预加载问题

通常项目配置router的懒加载，基于webpack4+和ES6，最简单的写法是

const routers = [{
  path: '/xxx',
  name: 'xxx',
  component: () => import('@/xx/xxx.vue') // import()的动态引入
}]

此时文件加载按页面引入，每个页面跳转进加载该页面需要的资源

prefetch预加载使首屏加载变慢

在vue-cli3升级之后，配置了webpack的预加载，这时候除了路由懒加载需要的当前页面资源，其他资源也会被请求，但不会被解析

白色文件就是预加载的文件，仍然会耗时下载，只是不会被解析。
由于预加载文件比较多，反而阻塞了实际需要的文件下载，首页渲染速度变慢。

解决方法

// 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
    })
  }
}