VUE路由懒加载如何实现

什么是路由懒加载

路由懒加载，也称为延迟加载或按需加载，是一种优化技术，可以延迟加载应用程序的某些模块或组件

这种技术可以在初始加载时只加载必要的基本组件，而将其他组件按需加载，当用户访问特定的路由时，相关的组件才会被异步加载。这样做的好处是可以减少初始加载的文件体积，提高应用程序的加载速度，特别是在处理大型单页应用时，可以有效地分担首页所承担的加载压力，减少首页加载时间，从而提高用户体验

实现路由懒加载的原理

Vue 路由懒加载的实现依赖于JS动态导入功能，该功能允许在需要时异步加载模块。

实现懒加载的方式有哪些？

非懒加载

import List from '@/components/home.vue'
const router = new VueRouter({
  routes: [
    { path: '/home', component: List }
  ]
})

实现懒加载的方式一

使用箭头函数+import动态加载

const Home = () => import('@/components/home.vue')
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home }
  ]
})

实现懒加载的方式二

使用箭头函数+require动态加载

const router = new Router({
  routes: [
   {
     path: '/home',
     component: resolve => require(['@/components/home'], resolve)
   }
  ]
})