使用vue开发已经有一段时间了,在后来的工作中,做的一些项目越来越大。vue打包后的js文件也越来越大,这会是影响加载时间的重要因素。当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。这里我汇总了常见的几种vue中路由懒加载的方法。
方法一 resolve
这一种方法较常见。它主要是使用了resolve
的异步机制,用require
代替了import
,实现按需加载,下面是代码示例:
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve)
}
]
})
方法二 官网方法
vue-router
在官网提供了一种方法,可以理解也是为通过Promise
的resolve
机制。因为Promise
函数返回的Promise
为resolve
组件本身,而我们又可以使用import
来导入组件。整合起来代码示例如下:
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld.vue')
}
]
})
官网中还提供了通过注释语法来提供chunk name的方法,但是webpack的版本要高于2.4的版本。感兴趣的可以到官网了解一下。
方法三 require.ensure
这种模式可以通过参数中的webpackChunkName
将js分开打包。
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: resolve => require.ensure([], () => resolve(require('@/components/'+componentName)), 'webpackChunkName')
}
]
})
在我之前的测试中,路由懒加载和自动化注册没办法同时使用,后期会尝试找一下同时满足两种需求的方法,目前在考虑
Nuxt.js
。如果使用了js分割打包的方法可能会有资源访问不到的情况,可以参考我之前写过的一篇文章vue 之 config配置文件详情
网友评论