vue通過webpack實現組件、頁面的按需加載

介紹

在比較大型的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用法，親測可行

轉至目錄