程式碼按需引入

import Vue from 'vue'
import VueRouter from 'vue-router'
// "@"相當於".."
import Detail from '../pages/goodsDetail'
import Msg from '../components/message.vue' 
// 使用路由Vue.use(VueRouter)
 export default new VueRouter({ 
 mode: 'history', 
                          
 routes: [    
         {     
          // 進行路由配置,規定'/'引入到home元件    
           path: '/',      
           component: resolve => require(['../pages/home.vue'], resolve),      
           meta: { 
               title: 'home'
               }   
          },  
          {      path: '/msg',     
                component: Msg   
           },   
             {  path: '/detail',     
                component: Detail,      
                children: [  
                          {path: 'msg',
                          component: Msg}
                          ]
             }
            ]
 

如果用import引入的話，當專案打包時路由裡的所有component都會打包在一個js中，造成進入首頁時，需要載入的內容過多，時間相對比較長。 當你用require這種方式引入的時候，會將你的component分別打包成不同的js，載入的時候也是按需載入，只用訪問這個路由網址時才會載入這個js。 你可以打包的時候看看目錄結構就明白了。 

本文來自 bujiongdan 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/bujiongdan/article/details/81503275?utm_source=copy