vue 路由懶加載詳情
1、什麼是路由懶加載
官方的解釋:
- 當打包構建應用時,
JavaScript
包會變得非常大,影響頁面加載。 - 如果我們能把不同路由對應的組件分割成不同的代碼塊,然後當路由被訪問的時候才加載對應組件,這樣就更加高效瞭。
官方想表達的意思
- 首先,我們知道路由中通常會定義很多不同的頁面
- 這個頁面最後會被打包到哪裡呢?一般情況下是會放在一個js文件中
- 但是頁面這麼多,所有文件都放到一個js文件中,必然會造成這個頁面會非常的大
- 如果我們一次性從服務器中請求下來這個頁面,可能需要花費一定的時間,甚至用戶的電腦上會出現短暫空白的情況
- 如何避免這種情況?使用路由懶加載即可
路由懶加載做瞭什麼
路由懶加載的主要作用是將路由對應的組件打包成一個個js代碼塊
隻要在這個路由被訪問到的時候,才加載對應的組件
2、路由懶加載的使用
在使用之前,我們先來看看原先代碼是如何加載路由的
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 } ];
我們看到從一開始我們就導入瞭路由對應的組件,如果需要的導入的組件非常多,那麼加載頁面就會相對較慢,我們來看下這種方式打包出來的文件
我們看到這種方式打包出來的文件隻有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 } ];
我們看到,在路由配置中什麼都不需要改變,隻需要像往常一樣使即可,隻是在這之前聲明瞭一個變量,變量中使用箭頭函數來導入對應的組件,使用起來非常簡單。
使用路由懶加載的方式打包出來的文件結構如下:
我們可以看到比原來的方式多出瞭3個js文件,這是因為我們上面代碼3個組件使用瞭路由懶加載,這3個js文件隻有路由被訪問到瞭才會去加載,能省下不少的加載時間
所以我們更推薦使用路由懶加載的方式去加載路由
到此這篇關於vue 路由懶加載詳情的文章就介紹到這瞭,更多相關vue 路由懶加載 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!