当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
项目代码
- 这次也是刚学到的一段代码,方便项目管理 懒加载路由
目录结构:
- router
- index.js
- router.js
复制代码
- router.js : 路由信息文件
export default {
'/': {
path: 'components/aaa',
name: 'aaa'
},
'/bbb': {
path: 'components/bbb',
name: 'bbb'
},
'/ccc': {
path: 'components/ccc',
name: 'ccc'
},
'/ddd': {
path: 'components/ddd',
name: 'ddd'
},
'/eee': {
path: 'components/common/eee',
name: 'eee'
}
}
复制代码
- index.js : 路由配置文件
import Vue from 'vue'
import Router from 'vue-router'
import router from './router'
Vue.use(Router)
function lazyLoad (path) {
return resolve => require(['@/' + path + '.vue'], resolve)
}
let routers = []
for (let key in router) {
if ({}.hasOwnProperty.call(router, key)) {
let item = {}
item.name = router[key].name
item.path = key
item.component = lazyLoad(router[key].path)
routers.push(item)
}
}
/**
* 路由信息配置
*/
export default new Router({
mode: 'history',
routes: routers
})
复制代码