vue通过webpack实现组件、页面的按需加载

最新推荐文章于 2025-07-06 20:00:00 发布

青鱼梦镜白

最新推荐文章于 2025-07-06 20:00:00 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： VUE webpack 文章标签： vue webpack

本文链接：https://blog.youkuaiyun.com/yuzheng7002/article/details/90261150

VUE 同时被 2 个专栏收录

8 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

本文介绍在大型Vue项目中，如何通过vuerequire方法和webpackensure实现路由组件的懒加载，减少首页加载时间，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

介绍

在比较大型的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用法，亲测可行

转至目录