為什麼需要懶載入？

像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。

方法 一：

vue-router 配置路由，使用非同步元件技術 resolve，用 require 代替 import 進行非同步按需載入

{  path: '/home', 
    name: 'home', 
    component: resolve => require(['@/components/home'],resolve) 
 
},

{  path: '/index', 
    name: 'Index', 
    component: resolve => require(['@/components/index'],resolve) 
}

方法 二：

Vue 官方提供的懶載入方法

{
      path: '/',
      name: 'HelloWorld',
      component: () => import('@/components/HelloWorld.vue')
}

方法 三：

使用 require.ensure 方法，這種模式可以通過引數中 webpackChunkName 將js分開打包

{
          path: 
 
'/',
          name: 'HelloWorld',
          component: resolve => require.ensure([], () => resolve(require('@/components/'+componentName)), 'webpackChunkName')
}