vue-cli3路由懶加載不生效 - 路由懶加載 - 路由配置

按照推薦將vue的路由配置以下來實現懶加載，可是路由懶加載不生效，仍是會把全部的chunk加載出來：

{   //首頁
    path: '/index',
    name: 'index',
    component: () => import('@/views/index/index.vue'),
},
{   //列表
    path: '/list',
    name: 'list',
    component: () => import('@/views/list/index.vue'),
}
複製代碼

但在控制檯卻發現進入首頁後會把所有的頁面的js文件都加載一遍，以下圖：

原來vue-cli3 默認會把全部經過import()按需加載的javascript文件加上 prefetch 。

prefetch是什麼？在打包後的文件中，查看index.html咱們會發現相似這個<link href=/js/chunk-118075e7.5725ab1a.js rel=prefetch>。<link rel="prefetch">會在頁面加載完成後，利用空閒時間提早加載獲取用戶將來可能會訪問的內容。

prefetch連接會消耗寬帶，若是是在移動端，並且存在大量的chunk，那麼能夠關掉 prefetch 連接，手動選擇要提早獲取的代碼區塊。

//手動選定要提早獲取的代碼
import(webpackPrefetch: true, './someAsyncComponent.vue')
複製代碼

關閉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
    })
  }
}
複製代碼