我們在用vue.js寫單頁面應(yīng)用時(shí)，會出現(xiàn)打包后的JavaScript包非常大，影響頁面加載。
我們都知道圖片的懶加載。當(dāng)圖片不出現(xiàn)在視口時(shí)，我們不加載這張圖片。那么我們是不是可以實(shí)現(xiàn)，路由的懶加載。當(dāng)我們用到某個(gè)路由后，才去加載對應(yīng)的組件，這樣就會更加高效。
實(shí)現(xiàn)這樣的功能，我們需要<strong>結(jié)合Vue的異步組件和webpack的code splitting feature。</strong>

下面開始研究路由的懶加載如何實(shí)現(xiàn)，以及它的效果。

首先，我們創(chuàng)建一個(gè)webpack模板的項(xiàng)目

vue init webpack my-project
cd my-project
npm install

我們添加路由，看下默認(rèn)情況下，單頁應(yīng)用如何加載js。

我們先在src/components/創(chuàng)建一個(gè)文件New.vue

 <template>
  <div>
    <h1>vue-router懶加載</h1>
    <h2>new doc</h2>
  </div>
</template>
<script>
 export default { }
</script>
<style>
    h1 {
        color: red;
    }
</style>

在App.vue 文件添加兩個(gè)鏈接

<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-link to="/">Go to hello</router-link>
    <router-link to="/new">Go to new</router-link>
    <router-view></router-view>
  </div>
</template>

在src/router/index.js 文件中添加路由

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

現(xiàn)在我們打包文件

npm run build

打包完后，打開頁面（如何不能打開，請自行解決。我配置了nginx，所以可以直接打開）

http://localhost/mall/dist/index.htm#/

我們看下，打開網(wǎng)頁后，加載了哪些資源。

1.png

現(xiàn)在，我們切換路由

http://localhost/mall/dist/index.htm#/new

我們發(fā)現(xiàn)，沒有新的資源加載。
因?yàn)橐淮涡约虞d了所有js。如果你的應(yīng)用很大，那么這個(gè)時(shí)候應(yīng)用打開會很慢。

用路由懶加載，看看效果如何

修改src/router/index.js 文件

import Vue from 'vue'
import Router from 'vue-router'
// import Hello from 'components/Hello'
// import New from 'components/New'
Vue.use(Router)
 // 把路由對應(yīng)的組件定義成異步組件
const Hello = resolve => {
    require.ensure(['components/Hello.vue'], () => {
        resolve(require('components/Hello.vue'))
    })
}
const New = resolve => {
    require.ensure(['components/New.vue'], () => {
        resolve(require('components/New.vue'))
    })
}

export default new Router({
    routes: [{
        path: '/',
        name: 'Hello',
        component: Hello
    }, {
        path: '/new',
        name: 'New',
        component: New
    }]
})

打包成功后，再打開頁面

http://localhost/mall/dist/index.htm#/

看下此時(shí)加載的資源

2.png

對比上一次，我發(fā)現(xiàn)此時(shí)加載的資源多了一個(gè)js文件。而這個(gè)js文件的內(nèi)容包含了Hello.vue文件的所有內(nèi)容。

下面我們切換路由

http://localhost/mall/dist/index.htm#/new

3.png

發(fā)現(xiàn)新加載了一個(gè)js文件。打開這個(gè)js,發(fā)現(xiàn)其中包含了，New.vue文件的所有內(nèi)容。

現(xiàn)在，我們實(shí)現(xiàn)了按需加載組件，而不是一次性將所有js加載完。不必?fù)?dān)心一次性加載完，導(dǎo)致頁面遲遲打不開的情況。

修改New.vue文件

<script>
  //增加了axios模塊的引用
  import axios from 'axios'
  console.log(typeof axios, 11)
  export default {
      name: 'hello',
      data() {
          return {
              msg: 'Welcome to Your Vue.js App'
          }  
      }
  }
</script>

打包后，打開文件

http://localhost/mall/dist/index.htm#/new

你會發(fā)現(xiàn)用來異步加載New組件的js增大了很多，這是因?yàn)槠渲邪薬xios的代碼。

好了，路由懶加載的實(shí)現(xiàn)就這么簡單。更多內(nèi)容請看官方文檔