什么是路由懒加载

简单理解就是按需加载，随用随取，他也叫延时加载

官方解释为

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

官方是不是说的太官方了，那就看我的

我们在开发的过程中，肯定会定义很多个页面，
而这些页面在bulid打包之后呢会放在一个单独的js文件里，当这个项目页面较多时，文件就会变得很大
这样情况下我们从服务器下载下来的时候呢就会很花费一定的时间，从而影响客户的使用体验
那么如何避免这种情况呢，当然就是使用我们的图片懒加载啦

路由懒加载是如何工作的

他会将路由所对应的组件打包成一个个的代码块
在需要访问这个路由的时候再加载，也就是上面所提到的按需加载

如何实现

vue项目实现路由按需加载（路由懒加载）的三种方式：

Vue异步组件
ES6标准语法import（）---------推荐使用！！！！！
webpack的require，ensure()

VUE异步加载

    1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
    2：component: resolve => require(['放入需要加载的路由地址'], resolve)

{ 
path: '/index',
name: 'index', 
component: resolve => require(['../views/index.vue'], resolve) }

Es6的import

直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
推荐使用这种方式，但是注意wepack的版本>2.4
vue官方文档中使用的也是import实现路由懒加载
上面声明导入，下面直接使用

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

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的文件名

此处代码参考原文链接：blog.csdn.net/czj10495616…

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
            }
	}]
})

多敲，多写，多看。

Vue之如何实现路由懒加载

什么是路由懒加载

官方解释为

官方是不是说的太官方了，那就看我的

路由懒加载是如何工作的

如何实现