React和Vue實(shí)現(xiàn)路由懶加載的示例代碼
懶加載：也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。
懶加載的意義：像vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多，時(shí)間過長(zhǎng)，會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)，減少資源的浪費(fèi)
簡(jiǎn)單的說就是：進(jìn)入首頁不用一次加載過多資源造成用時(shí)過長(zhǎng)
在React和Vue中，實(shí)現(xiàn)路由懶加載（Lazy Loading）的方法和代碼示例如下：
React
在React中，你可以使用React.lazy和Suspense組件來實(shí)現(xiàn)路由懶加載。下面是一個(gè)簡(jiǎn)單的示例：
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</Router>
);
}在這個(gè)示例中，我們使用React.lazy來動(dòng)態(tài)導(dǎo)入Home和About組件。當(dāng)用戶訪問相應(yīng)的路由時(shí)，對(duì)應(yīng)的組件會(huì)按需加載。Suspense組件用于在組件加載過程中顯示加載提示。
Vue
在Vue中，你可以使用異步組件來實(shí)現(xiàn)路由懶加載。下面是一個(gè)簡(jiǎn)單的示例：
import Vue from 'vue';
import Router from 'vue-router';
import Home from './routes/Home';
import About from './routes/About';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: () => import('./routes/About') }
]
});在這個(gè)示例中，我們使用動(dòng)態(tài)導(dǎo)入來按需加載組件。在路由定義中，我們將組件設(shè)置為一個(gè)返回Promise的函數(shù)，該P(yáng)romise解析為對(duì)應(yīng)的組件實(shí)例。這樣，當(dāng)用戶訪問相應(yīng)的路由時(shí)，對(duì)應(yīng)的組件才會(huì)被加載。Vue Router會(huì)自動(dòng)處理懶加載邏輯。
到此這篇關(guān)于React和Vue實(shí)現(xiàn)路由懶加載的示例代碼的文章就介紹到這了,更多相關(guān)React和Vue路由懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在使用?Vue?3?和?Vue?Router?4?開發(fā)中大型?SPA?應(yīng)用時(shí),我們經(jīng)常會(huì)遇到需要?jiǎng)討B(tài)添加或刪除路由的場(chǎng)景,下面小編來和大家講講Vue?Router4如何正確重置路由吧2025-05-05
詳解Vue如何實(shí)現(xiàn)自定義動(dòng)畫與動(dòng)畫效果設(shè)計(jì)
在Vue中，動(dòng)畫效果是非常有用的，它可以使用戶界面變得更加生動(dòng)、有趣，本文中我們將學(xué)習(xí)如何在Vue中進(jìn)行自定義動(dòng)畫與動(dòng)畫效果設(shè)計(jì)，感興趣的可以了解一下2023-06-06
vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí)，node_module中的 vue 版本可能被升級(jí)為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析,需要的朋友可以參考下2023-01-01
Ant Design Vue全局對(duì)話確認(rèn)框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對(duì)話確認(rèn)框(confirm)的回調(diào)不觸發(fā)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue過濾器實(shí)現(xiàn)日期格式化的案例分析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
VUE對(duì)Storage的過期時(shí)間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對(duì)Storage的過期時(shí)間設(shè)置,及增刪改查方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
在Vue.js的應(yīng)用開發(fā)中,我們經(jīng)常會(huì)遇到需要?jiǎng)討B(tài)修改DOM元素樣式的情況,Vue提供了多種方式來實(shí)現(xiàn)這一目標(biāo),其中ref是一個(gè)非常有用且靈活的工具,本文將深入探討如何在Vue項(xiàng)目中利用ref屬性來更改CSS樣式,并通過多個(gè)實(shí)例演示其具體用法,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了如何在vue里面優(yōu)雅的解決跨域(路由沖突問題),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了使用vue實(shí)現(xiàn)自定義多選與單選的答題功能,vue組件中在表單方面提供了一個(gè)v-model指令，非常好用，具體實(shí)現(xiàn)過程大家跟隨腳本之家小編一起看看吧2018-07-07