lighthouse - 자바스크립트 줄이기

성능최적화에 대해서 공부하면서 개발했던 프로젝트의 성능을 최적화해보면 어떨까? 생각하게 됐다.

그래서 이전에 팀프로젝트로 진행했던 서비스를 lighthouse로 성능 측정을 해보면서 그 과정을 정리해보려고한다.

 

 

🛠️프로젝트 성능을 측정해보자

위처럼 메인페이지를 성능측정해봤더니 처참했다.

현재 문제는 아래와 같다.

여기서 LCP가 가장 문제인 것으로 보인다.

하지만 오늘은 "자바스크립트 줄이기" 부분만 해결해보려고 한다.

 

 

🤔자바스크립트 줄이기?

말 그대로 불필요한 자바스크립트 코드를 줄이라고 하는 것이다.

그래서 커버리지로 검사를 해보면 아래와 같이 빨간 것을 볼 수 있는데
이게 사용하지 않는 자바스크립트 코드라고 한다.

 

 

🤔그럼 어떻게 줄여야할까?

사실 줄이는 방법은 다양하다.

그래서 나는 먼저 코드 스플리팅을 시도했다.

 

기존에 route만 사용한 react-router-dom에서 lazy를 활용해서 아래와 같이 수정했다.

// 동적 import를 위해 lazy 사용
const HomePage = lazy(() => import('./pages/home'));
const PostDetailPage = lazy(() => import('./pages/postDetail'));
//...

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      element={
        <Suspense fallback={<Loading/>}>
          <LayoutWrapper />
        </Suspense>
      }
    >
      <Route
        path="/"
        element={
          <Suspense fallback={<FeedSkeleton />}>
            <HomePage />
          </Suspense>
        }
      />
       <Route
        path="/posts/:postId"
        element={
          <Suspense fallback={<Loading />}>
            <PostDetailPage />
          </Suspense>
        }
      />
      
      //...

이렇게 적용하고 다시 lighthouse를 측정해봤다.

 

그랬더니 가능한 절감 효과가 400kb가량 줄어든 것을 볼 수 있었다.

 

 

📖번들 파일 분석 툴  bundle analyzer

bundle analyzer는 번들 파일이 어떻게 이루어져있는지 확인하는 툴이다.

번들링된 번들파일이 어떤 코드로 이루어져있는지 트리맵으로 시각화해서 보여준다.

 

webpack을 사용한다면 webpack-bundle-analyzer을 사용하고.

나는 vite를 사용했으므로 vite-bundle-analyzer을 설치해 사용했다.

 

vite-bundle-analyzer 사용법은 간단하다.

npm i -D vite-bundle-visualizer

설치한 다음 아래 명령어를 입렫하면 자동으로 창을 띄워준다.

npx vite-bundle-visualizer

 

그 결과를 아래 이미지로 보자

 

코드스플리팅 전

코드 스플리팅 후

 

왼쪽에 변화가 보인다.

pages가 뭉쳐져있었는데 lazy를 쓴 이후 따로 분리되었다.

이를 통해서 메인페이지(./)에 접근했을 때 400kb가 줄어든 것으로 추측된다.

 

 

 

🤔근데 아직 많이 남은 자바스크립트는 어떻게 줄일까?

그래도 여전히 줄여야할 자바스크립트가 있다.

이 부분은 어떻게 줄여야할까?

 

나는 이 방법을 찾던 도중에 배포환경에서는 결과가 다를 수 있다는 정보를 알게 됐고,
궁금해서 직접 확인해봤다.

내 프로젝트는 vercel에 배포되어있다.

 

배포 후

배포 후를 보면 성능 점수도 올라가있고, 이전에 보였던 다른 성능 문제도 없어진 것을 볼 수 있다. (3개의 문제는 똑같이 존재)

특히 내가 시도했던 자바스크립트 줄이기는 없어지고, 사용하지 않는 자바스크립트 줄이기만 존재하고 있다.

(lazy를 적용안한 배포입니다)

 

🤔그럼 lazy를 적용하지 않았는데 왜 성능 문제가 안보이는 것일까?

이는 production 환경과 development 환경에 차이가 있기 때문이다.

예를 들어 production 환경일 때는 webpack의 경량화라든지 난독화(uglify) 같은 추가적인 최적화 작업을 한다.

반면에 development는 그런 최적화 작업없이 서비스를 실행한다.

 

즉 각 환경에서 성능을 측정할 때 차이가 있으므로 최종서비스의 성능을 측정할 때는 실제 사용자에게 제공되는 production환경으로 빌드된 서비스의 성능을 측정해야된다.

 

🤔그럼 개발 환경에서 알려주는 불필요한 파일들은?

파일명들을 자세히 보면 react-dom과 react-query 등 node_modules에 포함되어있는 코드들로 판별됐다.

이러한 파일들은 직접 줄일 수 없으므로 아마 위에서 말했던 배포 후에 트리 쉐이킹 되는 것 같았다.

불필요한 자바스크립트를 가장 많이 포함한 파일이 node_modules에 존재한다.

 

😮그래도 존재하는 불필요한 자바스크립트..

배포 후에도 아직 존재하는 불필요한 자바스크립트 코드들이 있다.

이중에는 사용자의 특정 이벤트에 따라 실행되는 코드, 예기치 못한 상황에서 실행될 코드 등 다양한 것들이 존재할 수 있다.

이러한 코드들은 위에서 사용했던 지연로딩 기법을 사용해야한다고 한다.

 

그래서 직접 확인해보고 싶어서 배포환경에서 커버리지를 확인해봤다.

위처럼 난독화가 되어있지만 예외처리를 수행하는 코드들이 있음을 확인할 수 있었다.

위 코드를 개발 환경에서 확인해봤다.

아래 커버리지에서 보이는 것처럼 조금 조금씩 존재하는 불필요한 자바스크립트 코드가 모여서 아래 처럼 50kb가 모인 것 같았다.

하지만 저런 코드들은 대부분 예외처리나 이벤트와 같은 코드이므로 정말 사용하지 않는 코드들을 잘 찾아서 최적화를 해야된다.

 

 

📘마무리하며...

5월6일 현재 성능 최적화에 대해서 시도해본 점이 적었다.

아직 내가 성능 최적화를 글로만 알고 직접 해보지 못해서 별 거 아닌 것에 시간이 많이 소요됐다.
그래서 다시 책을 읽고, 자료를 찾아서 다시 시도해보려고 한다.

 

특히 LCP 문제는 꼭 해결해보려고한다.

원래 처음에는 LCP문제를 해결하려고 했지만 검색했던 해결 방법으로 모두 시도해봤지만 성능에 변화가 없었다.

근본적인 문제임을 추측했고, 이 또한 책을 읽어서 다시 시도해보려고 한다.