一.前言

當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶載入.

1. Vue 的非同步元件
2. webpack程式碼分割

建議首先熟讀這兩個知識點，會更容易理解懶載入的原理。本文的原始碼地址在-->lazyLoad，如果對你有幫助，歡迎star(・ε・●)

二.實戰

話不多說，我們來一步步實踐一下路由懶載入的過程
1.建立一個資料夾，目錄結構大致如下

2.建立兩個簡單的元件，作為切換元件時展示，程式碼很簡單

<template>
    <div>
        <h4>This is About Page</h4>
    </div>
</template>
<script>
export default {
    name:  'about'
}
</script>

3.重點是route的配置，沒有用到路由懶載入時，我們一般是這樣配置的：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
 

路由懶載入中我們要用到非同步元件，所以改為這樣配置：

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

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

除了上面用到的import()引入元件，我們還可以使用webpack特有的require.ensure()

const Baz = r => require.ensure([], ()=>r(require('./Baz.vue')), '/baz')

將其他的檔案配置完成後，我們就可以在瀏覽器中看到懶載入的效果了，即只有當路由匹配成功時，才會載入相應的元件，而且載入一次後會將它快取，下次再訪問這個路由，不會重新載入。

三、結語

感謝你閱讀我的文章，如對你有幫助，歡迎點贊收藏。如有錯誤，歡迎指正。最後，十分建議大家跟著實現一遍，原始碼地址在lazyLoad。

來源：https://segmentfault.com/a/1190000015904599