路由懶加載也可以叫做路由組件懶加載，最常用的是通過(guò)import()來(lái)實(shí)現(xiàn)它。

//route/index.js
{
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

然后通過(guò)Webpack編譯打包后，會(huì)把每個(gè)路由組件的代碼分割成一一個(gè)js文件，初始化時(shí)不會(huì)加載這些js文件，只當(dāng)激活路由組件才會(huì)去加載對(duì)應(yīng)的js文件。

我們使用vuecli創(chuàng)建項(xiàng)目時(shí)，默認(rèn)就配置路由懶加載，啟動(dòng)工程，打開(kāi)網(wǎng)頁(yè)，打開(kāi)開(kāi)發(fā)者工具的network發(fā)現(xiàn)：

app1.png

可以看到在Home路由的時(shí)候，初始化加載了這么多文件，其中我們重點(diǎn)關(guān)注app.js為98.2kb
然后我們切換到About路由

app1.png

可以看到，切換到About路由時(shí)，又加載了about.js，且size為預(yù)取緩存

然后再查看Elements發(fā)現(xiàn)：

app1.png

about.js是在瀏覽器空閑時(shí)下載，當(dāng)切換about路由時(shí)才加載about.js

當(dāng)我們?nèi)∠酚蓱屑虞d

import About from '../views/About.vue'
...
{
    path: '/about',
    name: 'About',
    component: About
  }
...

app1.png

對(duì)比發(fā)現(xiàn)比懶加載多了幾kb，別看只有幾kb，當(dāng)項(xiàng)目越做越大，app.js只會(huì)越大，差距也會(huì)越大
由此可見(jiàn)路由懶加載是非常有必要的一個(gè)性能優(yōu)化選項(xiàng)。