react 어떻게 게 으 른 로 딩 으로 첫 화면 로 딩 시간 을 줄 입 니까?

최근 에는 빠 른 탑재 에 사용 되 는 통합 프레임 워 크 를 쓰 고 있다.그 중 많은 문제 에 부 딪 혔 으 니 가장 중요 한 것 은 방문 속도 일 것 이다.저 는 react 가 vue 와 같이 게 으 른 로 딩 으로 첫 페이지 렌 더 링 에 걸 리 는 시간 을 줄 일 수 있 을 까 생각 했 습 니 다.
그래서 아주 좋 은 바퀴 를 찾 았 다.
쓰다
설치 하 다.

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;

서 류 는 다음 과 같은 예 에 따라 쓴다.

import loadable from "@loadable/component";

const Error404 = loadable(() => import("@/pages/err/404")); //      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;

서 류 는 다음 과 같은 예 에 따라 쓴다.

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Routes from "./router";
export default function App() {
  return (
    <Router>
      <Routes />
    </Router>
  );
}

이 때 페이지 에 가서 전환 경로 가 js 파일 을 동적 으로 불 러 왔 는 지 확인 할 수 있 습 니 다.길 을 바 꾸 어 js 파일 을 불 러 오 면 게 으 른 로 딩 경로 가 성공 했다 는 것 을 설명 합 니 다!
로드 속도 대비
사용 하지 않 았 습 니 다.
서버 대역 폭 1M,gzip 압축,파일 크기 2MB 정도,서버 요청 로드 시간 4.3s 정도


사용 경로 게 으 름 로드
서버 대역 폭 1M,gzip 압축,파일 크기 1MB 정도,서버 요청 로드 시간 1s 정도

이상 은 react 가 게 으 른 로 딩 을 어떻게 이용 하여 첫 화면 로 딩 시간 을 줄 이 는 지 에 대한 상세 한 내용 입 니 다.react 게 으 른 로 딩 으로 로 딩 시간 을 줄 이 는 데 관 한 자 료 는 저희 의 다른 관련 글 에 관심 을 가 져 주 십시오!