vue通过webpack实现组件、页面的按需加载
文章目录
- 介绍
- vue require方法 实现
- 利用wabpack ensure实现
介绍
在比较大型的vue项目中，会涉及到许多.vue文件的路由页面引用，但是，如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。当你用文中所示方法配置路由页面，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。
vue require方法 实现
rout = {
mode:'hash',
routes: [
{
path: '/',
redirect: '/Main',
},
{
path: '/',
component: resolve => require(['Components/page/Header/Home.vue'], resolve),
meta: { title: '自述文件' },
children:[
{
path: '/Main',
component: resolve => require([`../components/page/${comp}.vue`], resolve),
name:"Main",
meta: {
title: '系统首页' ,
// permission: true
},
},
{
path: '/Messages',
name:"Messages",
component: resolve => require(['Components/page/Admin/Messages.vue')], resolve),
meta: { title: '消息中心' }
},
{
path: '/404',
component: resolve => require(['Components/common/vue/404.vue')], resolve),
meta: { title: '404' }
},
{
path: '/403',
component: resolve => require(['Components/common/vue/403.vue')], resolve),
meta: { title: '403' }
},
]
},
{
path: '/login',
component: resolve => require(['Components/page/Login.vue')], resolve),
},
{
path: '*',
redirect: '/404'
}
]
}
转至目录
利用wabpack ensure实现
rout = {
mode:'hash',
routes: [
{
path: '/',
redirect: '/Main',
},
{
path: '/',
component:r => require.ensure( [], () => r (require('Components/page/Header/Home.vue'))),
meta: { title: '自述文件' },
children:[
{
path: '/Main',
component:r => require.ensure( [], () => r (require(`../components/page/${comp}.vue`))),
name:"Main",
meta: {
title: '系统首页' ,
// permission: true
},
},
{
path: '/Messages',
name:"Messages",
component:r => require.ensure( [], () => r (require('Components/page/Admin/Messages.vue'))),
meta: { title: '消息中心' }
},
{
path: '/404',
component:r => require.ensure( [], () => r (require('Components/common/vue/404.vue'))),
meta: { title: '404' }
},
{
path: '/403',
component:r => require.ensure( [], () => r (require('Components/common/vue/403.vue'))),
meta: { title: '403' }
},
]
},
{
path: '/login',
component:r => require.ensure( [], () => r (require('Components/page/Login.vue'))),
},
{
path: '*',
redirect: '/404'
}
]
}
注意：如果使用的vue-cli生成的项目，建议webpack用法，亲测可行
转至目录