Vue学习day6.md

一、路由懒加载

• 为什么需要懒加载？

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

vue 路由懒加载方式

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

1.vue 异步组件

• 这种方法主要是使用了 resolve 的异步机制，用 require 代替了 import 实现按需加载

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

2.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'),
    },
  ],
})

3.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/home'),
    },
  ],
})