react如何用懶加載減少首屏加載時(shí)間
最近在寫一個(gè)react-ant-admin的集成框架用于快速搭載中后臺(tái)項(xiàng)目。其中遇到很多問(wèn)題，最重要的應(yīng)該是訪問(wèn)速度了。我就想 react 可不可以和 vue 一樣用路由懶加載來(lái)減少首頁(yè)渲染所花費(fèi)的時(shí)間。
于是找到了一個(gè)很好用的輪子：@loadable/component
使用
安裝
npm install @loadable/component -D # or use yarn yarn add @loadable/component -D
如何在路由中使用？
在src/router/index.js文件中按照如下舉例來(lái)寫：
import React from "react";
import { Route, Switch } from "react-router-dom";
import routerList from "./routes";
const router = () => {
return (
<Switch>
{routerList.map((item) => {
const { component: Component, key, path, ...itemProps } = item;
return (
<Route
exact={true}
key={key}
path={path}
render={(allProps) => <Component {...allProps} {...itemProps} />}
/>
);
})}
</Switch>
);
};
export default router;
在src/router/routes.js文件按照如下舉例來(lái)寫：
import loadable from "@loadable/component";
const Error404 = loadable(() => import("@/pages/err/404")); // 對(duì)應(yīng)文件 src/pages/err/404.js
const Home = loadable(() => import("@/pages/home"));
const Demo = loadable(() => import("@/pages/demo"));
const routerList = [
{
path: "/",
key: "home",
components: Home,
},
{
path: "/demo",
key: "demo",
components: Demo,
},
{
path: "*",
key: "404",
components: Error404,
},
];
export default routerList;
在src/App.js文件按照如下舉例來(lái)寫：
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Routes from "./router";
export default function App() {
return (
<Router>
<Routes />
</Router>
);
}
此時(shí)可以去頁(yè)面查看切換路由的時(shí)候是否動(dòng)態(tài)加載了 js 文件。若切換路由加載了 js 文件，說(shuō)明懶加載路由成功！
加載速度對(duì)比
在沒有使用@loadable/component之前
服務(wù)器帶寬1M，gzip壓縮，文件大小2MB左右，服務(wù)器請(qǐng)求加載時(shí)間4.3s左右
使用路由懶加載
服務(wù)器帶寬1M，gzip壓縮，文件大小1MB左右，服務(wù)器請(qǐng)求加載時(shí)間1s左右
以上就是react如何利用懶加載減少首屏加載時(shí)間的詳細(xì)內(nèi)容，更多關(guān)于react懶加載減少加載時(shí)間的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React錯(cuò)誤邊界Error Boundaries詳解
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2022-12-12
Hook是一種函數(shù)，它可以讓你在函數(shù)組件中“掛鉤”到React狀態(tài)和生命周期等特性，這篇文章主要和大家介紹了React中Hook的作用和用處，希望對(duì)大家有所幫助2023-05-05
在?React?中使用?Context?API?實(shí)現(xiàn)跨組件通信的方法
在React中,ContextAPI是一個(gè)很有用的特性,可用于組件間的狀態(tài)共享,它允許跨組件傳遞數(shù)據(jù)而無(wú)需通過(guò)每個(gè)組件手動(dòng)傳遞props,本文給大家介紹在?React?中如何使用?Context?API?來(lái)實(shí)現(xiàn)跨組件的通信,感興趣的朋友一起看看吧2024-09-09
antd之RangePicker設(shè)置默認(rèn)值方式
這篇文章主要介紹了antd之RangePicker設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react+antd.3x實(shí)現(xiàn)ip輸入框
這篇文章主要為大家詳細(xì)介紹了react+antd.3x實(shí)現(xiàn)ip輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本)
散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸),接下來(lái)通過(guò)本文大家分享D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ，一起看看2019-05-05
解決React報(bào)錯(cuò)Parameter 'props' implicitly&nb
這篇文章主要為大家介紹了React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type的解決處理方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
函數(shù)式組件的基本意義就是,組件實(shí)際上是一個(gè)函數(shù),不是類,下面這篇文章主要給大家介紹了關(guān)于React中函數(shù)組件與類的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
在React中寫一個(gè)Animation組件為組件進(jìn)入和離開加上動(dòng)畫/過(guò)度效果
這篇文章主要介紹了在React中寫一個(gè)Animation組件為組件進(jìn)入和離開加上動(dòng)畫/過(guò)度效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06