첫 페이지 로딩 시간 개선

[yoouyeon]

📝 관련 이슈

MOD-42

💻 작업 내용

첫 페이지 로딩 시간을 "조금" 줄여보았습니다..

1. 페이지별로 lazy 로딩을 적용

Before

After

2. 프로덕션 환경에서 불필요한 패키지들을 dependency에서 devDependency로 옮김

• @tanstack/eslint-plugin-query
• @tanstack/react-query-devtools

📸 스크린샷

http://localhost:4173 에서 테스트한 결과입니닷 (캐시 모두 제거)

lighthouse

Before	After

vite-bundle-visualizer

Before	After

👻 리뷰 요구사항

(저번에 말씀드리긴 했지만) visualizer에서 보이듯이 lottie 파일이 너무너무너무 커서 지금은 크게 만족스러운 결과가 나오지 않는 것 같아요ㅠ
계획했던 것처럼 lottie 파일 크기를 최적화한 다음에 이것도 온보딩 페이지에서만 로드해서 사용하도록 해도 좋을 것 같다는 생각이 들었습니당

[yoouyeon]

지금 발생한 린트 에러는 devDependency에 있는 패키지를 import해서 나는 것이에요!

저번에 얘기했던 것처럼 react-query-devtools는 프로덕션 환경에서는 사용하지 않는 것이기 때문에 devDependency로 옮긴 것인데요.
Devtools 페이지를 다시 읽어 보니까 내부적으로 process.env.NODE_ENV === 'development' 일 경우에만 번들에 포함시킨다는 말이 있더라고요...... (이걸 이제 알았네요...)

By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.

제가 생각한 선택지는 크게 2가지인데 어떻게 하는게 좋을까요? 아니면 더 좋은 방법이 있을까요??

1. 어차피 production일 때는 번들에 포함되지 않으므로 다시 dependency에 추가한다. 👈 저는 약간 이쪽에 한표... 입니다
   → 이렇게 하면 문제는 없지만 이번에 그랬던 것처럼 나중에 봤을 때 좀 헷갈릴 수 있을 것 같기도 해요 (이게 왜 devDependency가 아니지...?)
2. lint 에러를 무시한다 (// eslint-disable-next-line import/no-extraneous-dependencies 추가)
   → 이렇게 하면 역시 문제는 없지만 (내부적으로 개발환경에서만 랜더링하도록 설정했기 때문에) 규칙을 임시로 회피한 느낌이라 조금 찝찝한 느낌..? (규칙이 있는 이유가 있으니까...?)

process.env.NODE_ENV === 'development' 조건을 달아서 이 경우에만 Import해서 랜더링하는 방법도 생각해보긴 했는데 이건 또 이미 내부적으로 처리된 로직을 한번 더 처리하는 꼴이라 좀 과한 것 같다는 생각이 들기도 해요....

어떻게 하는게 좋을까요... ( •︠ˍ•︡ )

[ongheong]

넵 변경사항 모두 확인했습니다! 고생하셨습니다 정연님 👍🏻

react-query-devtools 위치에 대해서는 저도 1번 방법처럼 다시 원래대로 dependency에 넣는게 좋아 보입니다!
전체 번들에 포함되는 점이 약간 마음에 걸리긴 했는데, Devtools 공식 문서에 적용 방법이 있네요! devtools 코드를 lazy loading을 통해 별도 청크로 분리하는 방법인데 이걸 적용해봐도 좋을 것 같습니당
devtools-in-production

import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Example } from './Example'

const queryClient = new QueryClient()

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

function App() {
  const [showDevtools, setShowDevtools] = React.useState(false)

  React.useEffect(() => {
    // @ts-ignore
    window.toggleDevtools = () => setShowDevtools((old) => !old)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <ReactQueryDevtools initialIsOpen />
      {showDevtools && (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </React.Suspense>
      )}
    </QueryClientProvider>
  )
}

export default App

[yoouyeon]

아닛 아래 부분을 좀 더 꼼꼼하게 읽어볼 걸 그랬네요... 알려주신 부분 읽어보고 적용해보고 다시 PR 열겠습니다!! 감사합니다... 🥹🍀

[yoouyeon]

링크해주신 문서 내용을 다시 한번 찬찬히 읽어봤는데요. 해당 내용은

프로덕션 환경에서는 기본적으로 devtools가 번들에서 제외되지만 프로덕션 환경에서 devtools를 사용해야 하는 상황이 있을 때 초기 번들에 포함시키지 않고 lazy load해서 사용할 수 있는 방법

을 알려주고 있는 것 같아요..!!

Devtools are excluded in production builds.
However, it might be desirable to lazy load the devtools in production

--

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

문서에 있는 것처럼 build/modern/production.js를 lazy load하면 이 파일 을 불러오게 되는데요.
기본적으로 devtools를 import할 때 불러오는 파일 안에 이미 개발 환경이 아닌 경우에는 null을 반환하도록 처리되어 있더라고요.

그래서 오히려 말씀해주신 코드를 적용하면 프로덕션 환경에서 제외된 녀석을 다시 불러오는 결과가 될 것 같다는 생각이 들었습니당
이미 라이브러리 안에서 개발환경에만 포함되도록 잘 적용되어 있으니 별도로 제외할 필요는 없을 것 같아 dependency에 옮기기만 했습니다!!

제가 제대로 이해한건지 모르겠네요 😵‍💫 제가 제대로 이해한 것이 맞는지 (...) 확인 한번만 부탁드립니다!!

[ongheong]

오옹 첨부해주신 코드 모두 확인했습니다! 내부적으로 Null로 처리하는지는 몰랐네요... 꼼꼼하게 확인해주셔서 감사합니다 ☺️