vue-cli3路由懒加载不生效 - 路由懒加载 - 路由配置

时间 2019-11-07

原文原文链接

按照推荐将vue的路由配置以下来实现懒加载，可是路由懒加载不生效，仍是会把全部的chunk加载出来：javascript

{   //首页
    path: '/index',
    name: 'index',
    component: () => import('@/views/index/index.vue'),
},
{   //列表
    path: '/list',
    name: 'list',
    component: () => import('@/views/list/index.vue'),
}
复制代码

但在控制台却发现进入首页后会把所有的页面的js文件都加载一遍，以下图：html

原来vue-cli3 默认会把全部经过import()按需加载的javascript文件加上 prefetch 。

prefetch是什么？在打包后的文件中，查看index.html咱们会发现相似这个<link href=/js/chunk-118075e7.5725ab1a.js rel=prefetch>。<link rel="prefetch">会在页面加载完成后，利用空闲时间提早加载获取用户将来可能会访问的内容。vue

prefetch连接会消耗宽带，若是是在移动端，并且存在大量的chunk，那么能够关掉 prefetch 连接，手动选择要提早获取的代码区块。java

//手动选定要提早获取的代码
import(webpackPrefetch: true, './someAsyncComponent.vue')
复制代码

关闭prefetch: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
    })
  }
}
复制代码