Vue的路由懶加載

　　Vue的一個重要原則就是SPA（single-page application），這就致使了咱們編寫項目時通常是分爲不一樣的模塊進行編寫，最後使用VueRouter來進行頁面間的跳轉。而當咱們的組件愈來愈多，頁面越來龐大的時候也會帶來頁面加載速度的緩慢，有時候打開一個頁面須要幾秒甚至十幾秒的時間，這樣的速度應該是不能被容忍的。

　　那爲何會出現這樣的狀況呢？出現這樣的狀況應當怎樣解決呢？咱們知道頁面之因此可以進行跳轉，是因爲Vue-router的存在，當你在網址輸入相對應的url後，Vue-router會跟據路由中所存在的地址信息進行匹配。當匹配到相對應路徑或別名後Vue就會將相對應的頁面顯示出來。

　　當咱們的組件愈來愈多的時候，路由文件也會愈來愈大。而每次Vue打包的時候會將全部路由文件中所指定的頁面所有集合到一塊兒，也就是說一個路由文件中假如包含了十個.vue文件，打包的時候webpack會將這十個.vue文件所有打到一個js文件中去，而當這十個其中一個頁面被加載時，其他九個.vue文件也會被隨之加載。這就是爲何當組件愈來愈多時，頁面加載速度緩慢的緣由。下圖是未使用懶加載時，項目打包狀況和各個文件大小：

　　這時候咱們引用各個文件的寫法是這樣的：

import Manager from '@/components/common/manager/index'
import APPImprove from '@/components/common/manager/appImprove'
import tsmImprove from '@/components/common/seniorManager/appImprove'
import managerApp from '@/components/common/manager/app'
import managerCert from '@/components/common/manager/cert'
import addApp from '@/components/common/manager/addApp'
import editApp from '@/components/common/manager/editApp'
import appDevice from '@/components/common/manager/appDevice'

　　這樣的寫法會致使此路由文件下全部的文件都會被打到一個.js文件中，咱們若是要使用路由懶加載的話就須要使用另一種的寫法：

const Manager = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/index.vue");
const APPImprove = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/appImprove.vue");
const tsmImprove = () => import(/* webpackChunkName: "Manager" */ "@/components/common/seniorManager/appImprove.vue");
const managerApp = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/app.vue");
const managerCert = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/cert.vue");
const addApp = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/addApp.vue");
const editApp = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/editApp.vue");
const appDevice = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/appDevice.vue");

　　在動態import()代碼處添加註釋webpackChunkName告訴webpack打包後的chunk的名稱（註釋中的內容很重要，不能省掉）

　　這時候咱們再看項目各文件的大小：

 

　　能夠看到本來很大的js文件被分割成很小的js文件，這樣在頁面訪問的時候就不會出現全部路由文件被同時加載的問題了。