React.lazy 와 Suspense로 성능개선!

현재 진행중인 프로젝트에서 로그인 페이지를 lightHouse로 분석해보니 아래와 같은 결과가 나왔다. 사용하고 있지 않는 자바스크립트를 같이 불러오고 있어서 페이지 로딩시간이 긴거같아서 이 부분을 개선해 보려고 한다.

 

🤔 왜 React.lazy를 생각했는지

react로 만들어지는 앱을 빌드하면 보통 js 파일이 index 파일 하나로 통합빌드가 이뤄지는데 최초 앱 렌더링시 당장 보여지지 않는 컴포넌트를 모두  불러와서 최초 로딩 속도를 지연시키는 원인이 되기도 한다.

 

이것을 코드 분활을 통해서 당장 사용할 컴포넌트만 불러오도록 개선을 해야하는데 어디선가 블로그에서 봤던 React.lazy를 이용해보려고한다. React.lazy는 리액트에서 제공하는 내장기능으로 필요에 따라 컴포넌트를 불러오도록 동작해주기 때문에 최초 로딩속도를 줄여 성능개선을 할 수 있다!

 

React.lazy 사용!

사용방법을 찾아보니 생각보다 굉장히 간단했다. 먼저 lazy를 import해오고 당장 import 해오지 않아도 될 컴포넌트들을 아래 코드와 같이 넣어놓았다. (원래 보통 import -- from "(경로)" 이렇게 해오는 따로 import를 밖에서 하지 않고 안에서 이렇게 임폴트를 하는것이다.)

  const Main = lazy(() => import("./pages/Main"))
  const Detail = lazy(() => import("./pages/Detail"))
  const Profile = lazy(() => import("./pages/Profile"))
  const Chat = lazy(() => import("./pages/Chat"))
  const ProductUpload = lazy(() => import("./pages/ProductUpload"))
  const PostUpload = lazy(() => import("./pages/PostUpload"))
  const PostUpdate = lazy(() => import("./pages/PostUpdate"))
  const ProductUpdate = lazy(() => import("./pages/ProductUpdate"))
  const Cart = lazy(() => import("./pages/Cart"))

그런다음 Suspense로 감싸서 필요에따라 컴포넌트를 불러올수 있고 fallback 으로 로드되는 동안 보여줄 로딩 화면으로 대체된다.

Suspense fallback={<div>로딩중.. </div>}>
        <ScrollToTop />
        <GlobalStyle />
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/join" element={<Join />} />
          <Route path="/setprofile" element={<Setprofile />} />
          <Route element={
            <ProtectRoute>
              <Outlet />
            </ProtectRoute>
          } >
            <Route path="/main" element={<Main />} />
            <Route path="/products/:id" element={<Detail />} />
            <Route path="/profile/:accountname" element={<Profile />} />
            <Route path="/chat" element={<Chat />} />
            <Route path="/postproduct" element={<ProductUpload />} />
            <Route path="/postposting" element={<PostUpload />} />
            <Route path="/product/:product_id" element={<ProductUpdate />} />
            <Route path="/uploadPosting/:posting_id" element={<PostUpdate />} />
            <Route path="/cart" element={<Cart />} />
          </Route>
          <Route path="/*" element={<NotFound />} />
        </Routes>
      </Suspense>

 

이렇게 하고 다시 로그인 화면을 lightHouse로 분서을 해보니 이전보다 성능이 개선된것을 볼 수있다

다른 페이지들도 살펴보니 대체로90점이상으로 성능이 많이 개선되었다