「Vue.js」Vue-Router + Webpack 路由懶加載實現

一.前言

當打包構建應用時，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')

將其餘的文件配置完成後，咱們就能夠在瀏覽器中看到懶加載的效果了，即只有當路由匹配成功時，纔會加載相應的組件，並且加載一次後會將它緩存，下次再訪問這個路由，不會從新加載。

3、結語

感謝你閱讀個人文章，如對你有幫助，歡迎點贊收藏。若有錯誤，歡迎指正。最後，十分建議你們跟着實現一遍，源碼地址在lazyLoad。