TIL : 최종프로젝트 25일차

메인페이지 성능개선하기

메인페이지에 이미지가 큰게 너무 많아서 로딩이 너무 길어 불편한 단점이 있었다.
그래서 light house 확장프로그램으로 우리 페이지의 성능을 측정해 보았는데,

퍼포먼스가 40밖에 안됐다.
발표 전에는 성능개선을 해야한다고 생각해서 팀원들에게 공유 후 메인페이지 개선방법을 고민했다. 하지만 처음 light house를 써봐서 그 안에 방법들이 다 나와있는지도 모른 채 이미지 성능개선만을 고민했다.

개선 방법 중 code splitting으로 메인페이지 외의 다른 페이지는 lazy loading되게끔 만들었다.

Routes를 Suspense로 감싸고,

  <Suspense
        fallback={
          <div className="h-screen flex justify-center items-center">
            <SyncLoader color="#A0A4A8" margin={10} size={18} />
          </div>
        }
      >
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/post" element={<Post />} />
          <Route path="/user/:id" element={<User />} />
          <Route path="/course/:id" element={<Course />} />
          <Route path="/edit/:id" element={<EditCourse />} />
          <Route path="/search" element={<Search />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/authforgot" element={<AuthForgot />} />
          <Route path="/*" element={<NotFound />} />
        </Routes>
  </Suspense>
      

페이지를 import 해주는 부분에서 lazy로딩 되게끔 아래와 같이 코드를 작성했다.

const Post = lazy(() => import("./Post"));
const User = lazy(() => import("./User"));
const Course = lazy(() => import("./Course"));
const Search = lazy(() => import("./Search"));
const EditCourse = lazy(() => import("./EditCourse"));

이렇게 코드분할로 나머지 페이지들을 나중에 로드하도록 했더니

코드분할만으로도 위처럼 성능개선을 할 수 있었다. 오오오!!

Next.js 를 사용했었으면, 자동으로 코드분할이 된다고 하던데... 이렇게 또 Next.js의 필요성을 알게 되었던 하루였다.