vue路由懒加载的实现方式(分享3种方式实现路由懒加载)

今天分享3种方式实现路由懒加载：

1、组件通过箭头函数import组件

component: () => import(
 /* webpackChunkName: 'ImportFuncDemo' */
 '@/views/about'
)

注意： 在vuecli3中我发现，通过懒加载的页面在首页访问时还是会加载

由源码中发现，懒加载的about文件引入加上了 rel = prefetch

<link rel="prefetch">会在页面加载完成后，利用空闲时间提前加载获取用户未来可能会访问的内容。

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

不需要该模式时可以 取消 prefetch

在 vue.config.js 中修改

module.exports = {
 chainWebpack: config => {
   // 移除 prefetch 插件
   config.plugins.delete('prefetch')
 }
}

2、vue异步组件技术 ==== 异步加载

component: resolve => require(['@/views/me'],resolve)

3、webpack提供的require.ensure()

chunkName ：文件名

component: () => require.ensure([], () => r(require('@/views/other')), 'chunkName'