为什么需要懒加载？
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
未使用懒加载时,全部用 import ... from ...
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
// import .....
// import ......
Vue.use(Router);
export default new Router({
routes:[
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
]
})
如果路由有上百个，那么要一次把上百个页面import进来，耗时也太长了！
vue-router路由懒加载的实现（解决vue项目首次加载慢）
1、vue异步组件
component : resolve => { reuqire([‘需要加载的路由地址’]) , resolve )
import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld = resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
routes:[
{path:'./',
name:'HelloWorld',
component:HelloWorld
// component: (resolve)=>{require(["@/components/HelloWorld"],resolve}
}
]
})
2、ES6的import()
const 组件名=() => import('组件路径');
import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld = ()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Router({
routes:[{
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
}]
})
3、webpack的require.ensure()
require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
第三个参数是错误回调。
第四个参数是单独打包的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
}
}]
})
使用懒加载好处 为给客户更好的客户体验 首屏组件加载速度更快一些
通俗得说 ，即在需要的时候的时候进行加载。
附：解决vue 首页加载缓慢、白屏现象
web app 之所以打开慢，主要还是渲染的问题：DNS解析 – 服务器交互 – 浏览器页面渲染
我们可以通过cdn引入、去除map文件、异步加载、按需引入、压缩等等方法，这里我就不再阐述了，大家可以自行搜索 Vue项目优化
1、路由懒加载
2、ui框架按需加载
3、webpack gzip压缩
4、巨大的数组或对象使用Object.freeze 来冻结一个对象
其他改善首屏白屏的方法：
骨架屏，loading