Vue-路由懒加载 3种方式（vue如何实现路由懒加载）

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

Tags：@lazy