vue开发之路由按需加载

落日映苍穹つ 2021-09-15 23:44 452阅读 0赞

通过vue写的单页应用时，可能会有很多的路由引入。就像图片的懒加载一样，如果客户根本就没有看到那些图片，而我们却在打开页面的时候全部给加载完了，这样会大大的增加请求的时间，降低用户的体验程度。

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体，打包的这个文件非常大，不利于加载。

我们需要将路由拆分为很多个小模块，可以使用路由懒加载实现

原来的引用方法

import Hello from '@/components/Hello'
    import Province from '@/components/Province'
    import Segment from '@/components/Segment'
    import User from '@/components/User'
    import Loading from '@/components/Loading'
    。。。。。

现在可以这样引用

routes: [
            {
                path: '/',
                redirect: '/dashboard'
            },
            {
                path: '/',
                component: resolve => require(['../components/common/Home.vue'], resolve),
                meta: { title: '自述文件' },
                children:[
                  
                    {
                        path: '/form',
                        component: resolve => require(['../components/page/BaseForm.vue'], resolve),
                        meta: { title: '基本表单' }
                    },
                    {
                        // 富文本编辑器组件
                        path: '/editor',
                        component: resolve => require(['../components/page/VueEditor.vue'], resolve),
                        meta: { title: '富文本编辑器' }
                    },
                    {
                        // markdown组件
                        path: '/markdown',
                        component: resolve => require(['../components/page/Markdown.vue'], resolve),
                        meta: { title: 'markdown编辑器' }    
                    },
                    {
                        // 图片上传组件
                        path: '/upload',
                        component: resolve => require(['../components/page/Upload.vue'], resolve),
                        meta: { title: '文件上传' }   
                    },
                    {
                        // vue-schart组件
                        path: '/charts',
                        component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
                        meta: { title: 'schart图表' }
                    },
                    {
                        // 拖拽列表组件
                        path: '/drag',
                        component: resolve => require(['../components/page/DragList.vue'], resolve),
                        meta: { title: '拖拽列表' }
                    },
                    {
                        // 权限页面
                        path: '/permission',
                        component: resolve => require(['../components/page/Permission.vue'], resolve),
                        meta: { title: '权限测试', permission: true }
                    }
                ]
            }
    
        ]

这样当我们加载的时候就不是加载一整个xxxx.js,而是加载需要的那个模块。