通過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,而是載入需要的那個模組。