快捷導(dǎo)航

react如何用懶加載減少首屏加載時(shí)間

更新時(shí)間：2021年04月16日 09:00:00 作者：阿政想暴富

這篇文章主要介紹了react如何利用懶加載減少首屏加載時(shí)間，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下

使用

安裝

npm install @loadable/component -D
# or use yarn
yarn add @loadable/component -D

如何在路由中使用？

在src/router/index.js文件中按照如下舉例來寫：

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文件按照如下舉例來寫：

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文件按照如下舉例來寫：

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í)可以去頁面查看切換路由的時(shí)候是否動(dòng)態(tài)加載了 js 文件。若切換路由加載了 js 文件，說明懶加載路由成功！

加載速度對(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底層的四大核心內(nèi)容架構(gòu)詳解
這篇文章主要為大家詳細(xì)介紹了react四大核心內(nèi)容架構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
windows下create-react-app 升級(jí)至3.3.1版本踩坑記
這篇文章主要介紹了windows下create-react-app 升級(jí)至3.3.1版本踩坑記，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
React動(dòng)畫實(shí)現(xiàn)方案Framer Motion讓頁面自己動(dòng)起來
這篇文章主要為大家介紹了React動(dòng)畫實(shí)現(xiàn)方案Framer Motion讓頁面自己動(dòng)起來，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
解決React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
一文詳解React中Hook的作用和用處
Hook是一種函數(shù)，它可以讓你在函數(shù)組件中“掛鉤”到React狀態(tài)和生命周期等特性，這篇文章主要和大家介紹了React中Hook的作用和用處，希望對(duì)大家有所幫助
2023-05-05
react學(xué)習(xí)筆記之state以及setState的使用
這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
React實(shí)現(xiàn)響應(yīng)式布局的最佳實(shí)踐
在當(dāng)今的前端開發(fā)中,響應(yīng)式設(shè)計(jì)已經(jīng)成為必不可少的部分,隨著各種設(shè)備的出現(xiàn),確保我們的網(wǎng)頁在不同屏幕尺寸上展示良好,已經(jīng)成為開發(fā)者的首要任務(wù)之一,本文將介紹如何在React中實(shí)現(xiàn)響應(yīng)式布局,提供一些最佳實(shí)踐和示例代碼,幫助大家更好地理解這一概念
2025-02-02
react.js框架Redux基礎(chǔ)案例詳解
這篇文章主要介紹了react.js框架Redux基礎(chǔ)案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
深入理解react-router@4.0 使用和源碼解析
這篇文章主要介紹了深入理解react-router@4.0 使用和源碼解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
React?中的重新渲染類組件及函數(shù)組件
這篇文章主要為大家介紹了React?中的重新渲染類組件及函數(shù)組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11