vue-router路由懒加载及实现方式

什么是路由懒加载

路由懒加载也被称为按需加载，是一种优化策略，主要是用来加速大型单页应用程序的加载速度。通常情况下，SPA应用程序由多个页面分别对应不同的路由，这些页面通常会一次性加载进浏览器中，然而这样的一干式加载很容易造成文件过大，页面加载速度缓慢。

利用路由懒加载机制，我们可以延迟加载应用程序的某些组件模块，一旦用户进入相应的路由，才加载这个模块，这样可以提高初始加载速度，同时避免加载不必要的组件，降低应用程序的体积。

Vue Router 支持路由懒加载，针对每个路由组件配置，可以使用类似内联函数的形式来实现。

如何实现路由懒加载

1、webpack的动态import()语法实现路由懒加载

Webpack 通过 import() 这种形式来支持动态加载，它会分开打包生成多个文件，只有在需要的时候才会去加载对应的文件。

以下是webpack的动态import()语法实现路由懒加载示例：

{ 
  path: '/home',
  component: () => import('./views/Home.vue')
}

::: tip
- path：路由路径
- component：对应的组件，因为要按需加载，所以这里的组件需要通过匿名函数来延迟加载。
:::

2、require.ensure()方法实现路由懒加载

对于一些版本比较老的项目，可能还在使用require.ensure()方法来实现路由懒加载。我们来看一下它的实现方式：

{ 
  path: '/home',
  component: resolve => {
    require.ensure(['../views/Home.vue'], () => {
      resolve(require('../views/Home.vue'))
    })
  }
}

::: tip
- path：路由路径
- component：对应的组件，因为要按需加载，所以这里的组件也需要通过匿名函数来延迟加载。与webpack的动态import()语法不同，这里使用的是require.ensure()方法。
:::

以上是使用Vue Router 实现路由懒加载的两种方式。这两种方式，在实现效果和原理上都是基本相同的，只是实现方式稍微有点不同。更建议使用 webpack 的动态import()语法，因为这种语法更加简洁，易于维护。

示例说明

示例一：使用动态import()实现路由懒加载

以下是一个典型的路由懒加载示例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import('@/components/HelloWorld')
    },
    {
      path: '/user',
      name: 'User',
      component: () => import('@/views/User')
    }
  ]
})

在代码中，我们针对两个路由组件设置了延迟加载。由于import()语法是es6语法，所以我们在components、views文件夹前，加上@/符合代表了项目根目录src的路径。

使用这种方式实现路由懒加载，我们达到了优化应用程序加载速度，避免不必要的代码加载。一旦用户进入了某个路由组件，才会加载该组件，提升了程序运行的效率。

示例二：使用require.ensure()实现路由懒加载

以下是使用 require.ensure() 实现路由懒加载的示例代码：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/about',
      name: 'About',
      component: resolve => {
        require.ensure(['@/views/About'], () => {
          resolve(require('@/views/About'))
        })
      }
    }
  ]
})

在代码中，我们在About路由组件中使用了require.ensure()方法，来按需加载该组件。当用户访问到/about路由时，才会去加载About组件，这样不仅节省了加载时间，还能快速响应用户的操作。

总之，路由懒加载是一种有用的优化策略，可以显著提高应用程序的运行效率。以上就是Vue Router实现路由懒加载的两种方式和示例说明。