메인페이지에 이미지가 큰게 너무 많아서 로딩이 너무 길어 불편한 단점이 있었다.
그래서 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
의 필요성을 알게 되었던 하루였다.