• 技術概述
• 技術詳述
  • 步驟
• 技術使用中遇到的問題和解決過程
• 總結
• 參考文獻

技術概述

當打包構建應用時，JavaScript包會變得非常大，影響頁面載入。懶載入，是一種很好的優化網頁或應用的方式。把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣加快了應用的初始載入速度，減輕了它的總體體積，使效率更高。

技術詳述

我們之前看到的懶載入一般是這樣的形式：

1. 瀏覽一個網頁，準備往下拖動滾動條
2. 拖動一個佔位圖片到視窗
3. 佔位圖片被瞬間替換成最終的圖片

我們可以在Medium中看到懶載入是如何使用的，網頁首先用一張輕量級的圖片佔位，當佔位圖片被拖動到視窗，瞬間載入目標圖片，然後替換佔位圖片。

步驟

首先，可以將非同步元件定義為返回一個 Promise 的工廠函式 (該函式返回的 Promise 應該 resolve 元件本身)：

const Foo = () =>
Promise.resolve({
/* 元件定義物件 */
})

第二，在 Webpack 2 中，我們可以使用動態 import (opens new window)語法來定義程式碼分塊點 (split point)：

import('./Foo.vue') // 返回 Promise

結合這兩者，這就是如何定義一個能夠被 Webpack 自動程式碼分割的非同步元件。

const Foo = () => import('./Foo.vue')
 

在路由配置中什麼都不需要改變，只需要像往常一樣使用Foo：

const router = new VueRouter({
routes: [{ path: '/foo', component: Foo }]
})

技術使用中遇到的問題和解決過程

懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入。當時我們的頁面中有很多的元件和資源，載入速度比較慢，於是我們決定使用這項技術。

1、未用懶載入，vue中路由程式碼如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
 export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })
 

2、vue非同步元件實現懶載入
方法如下：component：resolve=>(require(['需要載入的路由的地址'])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 注意 : 此處應省去之前匯入的HelloWorld模組 */
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

總結

覺得這個技術並不難學，主要要多動手實踐，熟悉它的使用。

參考文獻

路由懶載入
懶載入是如何實現的？
vue-router路由懶載入的使用