vue 路由懶加載詳情
1、什么是路由懶加載
官方的解釋?zhuān)?/strong>
- 當(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í)間，甚至用戶(hù)的電腦上會(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)就比較慢，給用戶(hù)體驗(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)如下：
我們可以看到比原來(lái)的方式多出了3個(gè)js文件，這是因?yàn)槲覀兩厦娲a3個(gè)組件使用了路由懶加載，這3個(gè)js文件只有路由被訪問(wèn)到了才會(huì)去加載，能省下不少的加載時(shí)間
所以我們更推薦使用路由懶加載的方式去加載路由
到此這篇關(guān)于vue 路由懶加載詳情的文章就介紹到這了,更多相關(guān)vue 路由懶加載 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
這篇文章主要介紹了Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-04-04
vue.js相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面通過(guò)本文給大家分享vue.js語(yǔ)法及常用指令，希望對(duì)大家有所幫助2017-10-10
在系統(tǒng)開(kāi)發(fā)中遇到了這么一個(gè)問(wèn)題：后端一次性返回上百條的數(shù)據(jù)，我需要把返回的數(shù)據(jù)全部顯示在表格里，而且甲方爸爸明確指定了表格是不允許使用分頁(yè)的?？墒钱?dāng)使用a-table裝載上百條數(shù)據(jù)時(shí)，頁(yè)面出現(xiàn)了明顯的卡頓現(xiàn)象。只能使用滾動(dòng)加載的方案來(lái)代替了。2021-06-06
vue router-view的嵌套顯示實(shí)現(xiàn)
本文主要介紹了vue router-view嵌套顯示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue.js或js實(shí)現(xiàn)中文A-Z排序的方法
下面小編就為大家分享一篇vue.js或js實(shí)現(xiàn)中文A-Z排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
利用Vue2.x開(kāi)發(fā)實(shí)現(xiàn)JSON樹(shù)的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開(kāi)發(fā)實(shí)現(xiàn)JSON樹(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
在Vue項(xiàng)目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個(gè)非常常見(jiàn)的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價(jià)值，感興趣的可以了解一下2024-01-01
Vue2 監(jiān)聽(tīng)屬性改變watch的實(shí)例代碼
今天小編就為大家分享一篇Vue2 監(jiān)聽(tīng)屬性改變watch的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08