路由懒加载

路由懒加载

什么是路由懒加载为什么要使用路由懒加载三种路由懒加载方式vue异步组件技术——异步加载ES6推荐方式imprort ()—-推荐使用webpack提供的require.ensure()实现懒加载

什么是路由懒加载

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

为什么要使用路由懒加载

1：像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大。2：造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验。3：而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

三种路由懒加载方式

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

vue异步组件技术——异步加载

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

举例：

{   path: '/problem',   name: 'problem',   component: resolve => require(['../pages/home/problemList'], resolve)}

ES6推荐方式imprort ()—-推荐使用

{  path: '/vipcard',  component: ()=> import('../views/vipcard/VipCard.vue')}

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