vue 路由懒加载方式

为什么需要懒加载？

像 vue 这种单页面应用，如果没有路由懒加载，运用 webpack 打包后的文件将会很大，造成进入首页时，需要加载的内容过多，出现较长时间的白屏，运用路由懒加载则可以将页面进行划分，需要的时候才加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

vue 路由懒加载有以下三种方式

• vue 异步组件
• ES6 的 import()
• webpack 的 require.ensure()

vue 异步组件

这种方法主要是使用了 resolve 的异步机制，用 require 代替了 import 实现按需加载，webpack4中 动态增加路由懒加载，需使用此方式进行加载，否则会报错。

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

require.ensure

这种模式可以通过参数中的 webpackChunkName 将 js 分开打包。

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

ES6 的 import()

vue-router 在官网提供了一种方法，可以理解也是为通过 Promise 的 resolve 机制。因为 Promise 函数返回的 Promise 为 resolve 组件本身，而我们又可以使用 import 来导入组件。

export default new Router({
  routes: [
    {
      path: '/home',
      component: () => import('@/components/home')
    },
    {
      path: '/about',
      component: () => import('@/components/about')
    },
  ],
})