Vue路由懒加载

Vue路由懒加载

一、为什么要懒加载

• 项目到后期，JavaScript 包会变得非常大，影响页面加载。

• 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

二、使用

　常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

1. 未使用懒加载：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'  //未用懒加载

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

2. vue异步组件实现懒加载

　方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

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

3. ES 提出的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')
    }
  ]
})

组件懒加载：同理（略）