當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。
如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

官方想表達(dá)的意思

首先，我們知道路由中通常會(huì)定義很多不同的頁(yè)面
這個(gè)頁(yè)面最后會(huì)被打包到哪里呢？一般情況下是會(huì)放在一個(gè)js文件中
但是頁(yè)面這么多，所有文件都放到一個(gè)js文件中，必然會(huì)造成這個(gè)頁(yè)面會(huì)非常的大
如果我們一次性從服務(wù)器中請(qǐng)求下來(lái)這個(gè)頁(yè)面，可能需要花費(fèi)一定的時(shí)間，甚至用戶的電腦上會(huì)出現(xiàn)短暫空白的情況
如何避免這種情況？使用路由懶加載即可

路由懶加載做了什么

路由懶加載的主要作用是將路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)js代碼塊
只要在這個(gè)路由被訪問(wèn)到的時(shí)候，才加載對(duì)應(yīng)的組件

2、路由懶加載的使用

在使用之前，我們先來(lái)看看原先代碼是如何加載路由的

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/user/:userId",
    name: "User",
    component: User
  }
];

我們看到從一開(kāi)始我們就導(dǎo)入了路由對(duì)應(yīng)的組件，如果需要的導(dǎo)入的組件非常多，那么加載頁(yè)面就會(huì)相對(duì)較慢，我們來(lái)看下這種方式打包出來(lái)的文件

我們看到這種方式打包出來(lái)的文件只有2個(gè)js文件，之后我們加載頁(yè)面的時(shí)候，需要把這2個(gè)文件全部加載完，頁(yè)面才會(huì)展示，如果代碼量過(guò)多，那么頁(yè)面響應(yīng)就比較慢，給用戶體驗(yàn)非常不好

接下來(lái)我們使用路由懶加載

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 新增路由懶加載代碼
const Home = () => import('../views/Home')
const About = () => import('../views/About')
const User = () => import('../views/User')

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/user/:userId",
    name: "User",
    component: User
  }
];

我們看到，在路由配置中什么都不需要改變，只需要像往常一樣使即可，只是在這之前聲明了一個(gè)變量，變量中使用箭頭函數(shù)來(lái)導(dǎo)入對(duì)應(yīng)的組件，使用起來(lái)非常簡(jiǎn)單。

使用路由懶加載的方式打包出來(lái)的文件結(jié)構(gòu)如下：