vue-router路由懶加載

require: 運行時調用，理論上可以運用在代碼的任何地方，
import：編譯時調用，必須放在文件開頭

懶加載：component: resolve => require(['@/view/index.vue'], resolve)
用require這種方式引入的時候，會將你的component分別打包成不同的js，加載的時候也是按需加載，只用訪問這個路由網址時才會加載這個js

非懶加載：component: index
如果用import引入的話，當項目打包時路由里的所有component都會打包在一個js中，造成進入首頁時，需要加載的內容過多，時間相對比較長

vue的路由配置文件(routers.js)，一般使用import引入的寫法，當項目打包時路由里的所有component都會打包在一個js中，在項目剛進入首頁的時候，就會加載所有的組件，所以導致首頁加載較慢，

而用require會將component分別打包成不同的js，按需加載，訪問此路由時才會加載這個js，所以就避免進入首頁時加載內容過多。

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
        }
      ]
    }
  ]
})

　　

ES6 提出的import方法，（------最常用------）

　　　　方法如下：const HelloWorld = （）=>import('需要加載的模塊地址')

　　　　（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

 

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

 

 

 

轉：https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html