路由懒加载——vue路由（五）

定义

现实生活中让一个人一次等待1万秒，这个人肯定不干，但是1万次，一次等待一秒，这个人肯定能接受，后者的处理就是软件开发中的懒加载，也叫延迟加载。所谓路由加载有两种方式，一种是一次性将所有的路由全部加载（不管用不用），前面所有的示例都是这种加载方式。这种加载方式特点首次加载很慢，首次打开页面的时间很长。另一种方式叫懒加载，首次并不将所有的组件进行加载，当用到那个组件时加载那个组件，这样将加载时所需的时间分散到各个操作中，提高用户的体验。
在单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

懒加载语法

懒加载使用也很方便，这里介绍使用vue异步加载组件和ES6 中的import进行懒加载两种方式

1. vue异步加载组件所要做的就是在定义route时，使用懒加载语法，格式如下

path:'/home',
name:'home',
component：resolve=>(require(['@/view/home.vue'])，resolve)

2. ES6 中的import加载

const HelloWorld = () => import("@/components/HelloWorld");
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})
 
/*或者*/
 
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: () => import("@/components/HelloWorld")
  }]
})

小结

延迟加载是某前最常用的提高用户体验的方法，路由懒加载方式详细内容参见
vue路由懒加载的几种方式