vue（18）路由懶載入

Silent丿丶黑羽發表於2021-07-18
Vue路由

什麼是路由懶載入

官方的解釋：

  • 當打包構建應用時，JavaScript 包會變得非常大，影響頁面載入。
  • 如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

官方想表達的意思

  • 首先，我們知道路由中通常會定義很多不同的頁面
  • 這個頁面最後會被打包到哪裡呢？一般情況下是會放在一個js檔案中
  • 但是頁面這麼多，所有檔案都放到一個js檔案中，必然會造成這個頁面會非常的大
  • 如果我們一次性從伺服器中請求下來這個頁面，可能需要花費一定的時間，甚至使用者的電腦上會出現短暫空白的情況
  • 如何避免這種情況？使用路由懶載入即可

路由懶載入做了什麼

  • 路由懶載入的主要作用是將路由對應的元件打包成一個個js程式碼塊
  • 只要在這個路由被訪問到的時候，才載入對應的元件
     

路由懶載入的使用

在使用之前，我們先來看看原先程式碼是如何載入路由的

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
  }
];

我們看到從一開始我們就匯入了路由對應的元件，如果需要的匯入的元件非常多，那麼載入頁面就會相對較慢，我們來看下這種方式打包出來的檔案
vue（18）路由懶載入
我們看到這種方式打包出來的檔案只有2個js檔案，之後我們載入頁面的時候，需要把這2個檔案全部載入完，頁面才會展示，如果程式碼量過多，那麼頁面響應就比較慢，給使用者體驗非常不好

接下來我們使用路由懶載入

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
  }
];

我們看到，在路由配置中什麼都不需要改變，只需要像往常一樣使即可，只是在這之前宣告瞭一個變數，變數中使用箭頭函式來匯入對應的元件，使用起來非常簡單。

使用路由懶載入的方式打包出來的檔案結構如下：
vue（18）路由懶載入
我們可以看到比原來的方式多出了3個js檔案，這是因為我們上面程式碼3個元件使用了路由懶載入，這3個js檔案只有路由被訪問到了才會去載入，能省下不少的載入時間

所以我們更推薦使用路由懶載入的方式去載入路由

相關文章