사용하지 않는 자바스크립트 이슈

1. 문제상황

 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서. 사용하지 않는 자바스크립트라는 항목이 나옴. 실제로 자바스크립트 전송크기가 918.3KIB라는 수치가 나옴

 

2. 가설 (H1)

 : 네트워크 탭에서 자세한 정보를 확인해보니 메인 페이지로 들어왔을 때 해당 메인 페이지와 관련이 없는 Detail , Write페이지가 렌더링되고 있음을 확인 . 따라서 지연로딩을 시켜야 겠다는 생각을 함.

3. 해결(S1)

 : 라우터에서 지연 로딩을 구현함. 구현한 코드는 다음과 같음

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Suspense, lazy } from "react";

const Home = lazy(() => import("../pages/Home"));
const Write = lazy(() => import("../pages/Write"));
const Detail = lazy(() => import("../pages/Detail"));

const Router = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/write" element={<Write />} />
          <Route path="/detail/:postId" element={<Detail />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

export default Router;

 

실제로 지연 로딩을 시켰을 때 데이터 상으로는 다음과 같은 결과가 도출됨

전송 크기 : 918.3KIB => 464.5KIB으로 줄어듬