vue-router实现懒加载的几种方式

参考文档

路由懒加载: 也叫延迟加载，即在需要的时候进行加载，随用随载。

为什么需要懒加载:

1. 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
2. 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

如果实现路由懒加载:

方法一: Vue异步加载

vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
例:

{
	path: '/login',
    component: () => import('@/views/login/index'),
}

方法二: ES6推荐方式imprort ()

import Vue from 'vue';
import Router from 'vue-router';
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
export default new Router({
 routes: [
  {
   path: '/Foo',
   name: 'Foo',
   component: Foo
  },
  {
   path: '/Aoo',
   name: 'Aoo',
   component: Aoo
  }
 ]
})

方法三: webpack提供的require.ensure()实现懒加载

1. vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

2. 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

3. require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。

4. 第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。

5. 第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。

6. 第三个参数是错误回调。

7. 第四个参数是单独打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})