当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
使用了懒加载
javascript
export default [ {
path: '/search/:keyword?',
component: () =>import('@/pages/Search/index'),
meta: { showHeader: true, showFooter: true },
name: 'search'
},
{
path: '/login',
component: () =>import('@/pages/Login/index'),
meta: { showHeader: false, showFooter: false }
},]
不使用懒加载
javascript
import Login from '@/view/Login'
export default [
{
path: '/login',
component: () =>import('@/pages/Login/index'),
meta: { showHeader: false, showFooter: false }
},
]