前言:
为什么要使用路由懒加载。什么情况下使用路由懒加载
目的:
为给客户更好的客户体验,首屏组件加载速度更快,减少请求资源数量,降低网络差导致出现白屏的概率。
定义:
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。
改造例子(未实现懒加载)
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld'
export default new Router({
routes: [
{
path: '/Foo',
name: 'Foo',
component: HelloWorld
}
]
})
实现方式
1.Vue异步组件
import Vue from 'vue';
import Router from 'vue-router';
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: resolve => require(['../pages/HelloWorld/index'], resolve)
}
]
})
2.ES6的import()
import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld= () => import('../components/HelloWorld')
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
}
})
3.import扩展-->使用webpack把组件按组分块
import Vue from 'vue';
import Router from 'vue-router';
// 官网可知:下面没有指定webpackChunkName,每个组件打包成一个js文件。
// const HelloWorld= () => import('../components/HelloWorld')
// const Foo = () => import('../components/Foo')
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
const HelloWorld= () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/HelloWorld')
const Foo= () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Foo',
name: 'Foo',
component: Foo
}
]
})
总结:路由常用两种懒加载方式
1.vue异步组件实现路由懒加载
component:resolve=>(['需要加载的路由的地址',resolve])
2.es提出的import(推荐使用这种方式)
const HelloWorld = ()=>import('需要加载的模块地址')
如果还想把组件按组分块,在import中增加webpackChunkName
参考文献: