通常項目配置router的懶加載，基于webpack4+和ES6，最簡單的寫法是

const routers = [{
  path: '/xxx',
  name: 'xxx',
  component: () => import('@/xx/xxx.vue') // import()的動態(tài)引入
}]

此時文件加載按頁面引入，每個頁面跳轉進加載該頁面需要的資源

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