[FE] 성능 개선 : bundle main.js 용량 줄이기

[jinhokim98]

issue

• close [FE] 성능 개선 : bundle main.js 용량 줄이기 #785

개선 이유

랜딩 페이지에서 필요하지 않은 스크립트를 제거해서 랜딩 페이지 초기 로딩 시에 자바스크립트 실행 시간을 줄이고 네트워크 요청량도 줄이는 효과를 얻고 싶었습니다.

현재 성능

npm run build를 했을 때는(g-zip 적용 전) 688KB가 나왔고, cloudfront에서 g-zip을 적용한 후 결과는 219KB이고 시간은 18ms가 걸렸습니다. 목표는 200KB 이하로 떨어뜨리는 것입니다.

코드 스플리팅

이미 코드 스플리팅이 적용되어있지만 하지만 페이지 추가된 컴포넌트에 스플리팅이 되어있지 않아서 추가로 랜딩 페이지에서 필요하지 않은 컴포넌트에 스플리팅을 적용했습니다.

추가로 생성된 페이지 컴포넌트에 lazy loading을 적용한 결과 28KB를 줄일 수 있었습니다.

랜딩 페이지에서 사용하지 않는 Tanstack-Query 분리

서버 상태 관리 라이브러리로 Tanstack-Query를 사용하고 있습니다. 하지만 랜딩 페이지에서는 백엔드 서버로 api 요청을 보내는 기능이 없습니다. 즉 랜딩 페이지에서는 Tanstack-Query가 필요하지 않은데 Tanstack-Query 관련 스크립트가 main에 포함되어있는 상황입니다. 그래서 이를 분리해서 백엔드 서버로 api를 요청하는 컴포넌트에서만 Tanstack-Query 스크립트를 불러오게 한다면 main을 더 줄일 수 있을 것 같아 진행했습니다.

개선 전 App 컴포넌트

const App: React.FC = () => {
  return (
    <HDesignProvider>
      <UnPredictableErrorBoundary>
        <Global styles={GlobalStyle} />
        <ErrorCatcher>
          <QueryClientBoundary>
            <ReactQueryDevtools initialIsOpen={false} />
            <NetworkStateCatcher />
            <ToastContainer />
            <AmplitudeInitializer>
              <Outlet />
            </AmplitudeInitializer>
          </QueryClientBoundary>
        </ErrorCatcher>
      </UnPredictableErrorBoundary>
    </HDesignProvider>
  );
};

export default App;

여기서 주목할 것은 ErrorCatcher와 QueryClientBoundary, ToastContainer입니다. 백엔드 서버로 api 요청 시 에러가 발생하면 QueryClientBoundary에서 error를 발생시키고 ErrorCatcher에서 이를 감지해서 Toast를 띄우는 기능입니다. 즉 이 세 개의 컴포넌트는 백엔드로 api를 요청하지 않는다면 필요 없는 컴포넌트입니다. 메인 페이지에서는 이 기능이 필요 없는데 프로젝트의 전반적으로 사용되는 코드에 포함되어있으니 비효율적이라고 판단. 이를 분리해보기로 했습니다.

EssentialQueryApp

const EssentialQueryApp: React.FC = () => {
  return (
    <ErrorCatcher>
      <QueryClientBoundary>
        <ReactQueryDevtools initialIsOpen={false} />
        <ToastContainer />
        <Outlet />
      </QueryClientBoundary>
    </ErrorCatcher>
  );
};

export default EssentialQueryApp;

Tanstack-Query를 사용해야하는 컴포넌트에서는 EssentialQueryApp 컴포넌트를 부르도록 분리했습니다. 그리고 EssentialQueryApp은 랜딩 페이지에서 필요하지 않은 컴포넌트이므로 동적 import를 적용시켜줬습니다.

서비스 전반적으로 필요한 컴포넌트는 최상단에서 불러주고 메인 페이지에는 EssentialQueryApp을 적용시키지 않았습니다.
그리고 그 외 페이지들은 백엔드로 api 요청을 날리므로 EssentialQueryApp을 적용시켜서 QueryClient가 필요한 컴포넌트에만 Tanstack-Query 스크립트가 포함되도록 변경했습니다.

import App from './App';
const EssentialQueryApp = lazy(() => import('./EssentialQueryApp'));

const router = createBrowserRouter([
  {
    path: '',
    element: (
      <Suspense>
        <App />
      </Suspense>
    ),
    children: [
      {
        index: true,
        path: ROUTER_URLS.main,
        element: <MainPage />,
      },
      {
        element: <EssentialQueryApp />,
        children: [
          {
            path: ROUTER_URLS.createEvent,
            element: <CreateEventFunnel />,
          },
          ....
        ],
      },
    ],
  },
]);

개선 결과

main에서 Tanstack-query 관련 기능을 분리한 결과 23KB를 추가로 감소시킬 수 있었습니다.

Tree Shaking

export default를 사용해서 export 하면 tree shaking이 제대로 적용되지 않는다고 합니다. 하지만 우리 코드에선 이미 export default가 많습니다. 다행히 Webpack의 Tree Shaking 공식문서를 보면 package.json에 sideEffects: false 속성을 추가하게 되면 webpack이 tree shaking을 할 때 사용하지 않는 export는 제거해도 괜찮다는 것을 webpack에 알려줄 수 있다고 합니다. 그래서 export default를 해주고 있어도 실제로 사용하지 않고 있다면 webpack이 tree shaking을 해주게 됩니다. 휴우..

Tree Shaking을 진행해준 결과 31KB를 추가로 감소시킬 수 있었습니다.

개선 결과

g-zip이 적용된 결과 main bundle을 보면 194KB이고 시간은 11ms가 측정됐습니다.
개선하기 전보다 bundle 크기는 219KB에서 194KB로 25KB를 줄였으며, 시간은 18ms에서 11ms로 7ms를 줄일 수 있었습니다.

🫡 참고사항

이번에도 위를 정리한 블로그 글을 첨부할게요.
https://jinokim.tistory.com/43

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-pokbbpnhyh.chromatic.com/

[soi-ha]

용량이 정말 많이 줄었네요! 최고에요 쿠키~!

[soi-ha]

이건 또 처음 알았네요!
쿠키 덕분에 새로운거 또 알고 갑니댜~

[Todari]

최적화의 신.... 고생했어요