최근 웹은 더 동적이고 많은 정보를 다루기 시작하면서 Javascript를 얼마나 빠르게 로드하는지에 대한 요구 사항이 항상 존재해왔습니다. 사용되지 않는 자바스크립트는 개발자 도구의 성능 분석 도구(ex. LightHouse)에서도 확인되는 것 처럼 페이지의 전반적인 성능에 영향을 미치곤 합니다.

이미 이를 개선하기 위해서 코드 분할(Code Splitting), 트리 쉐이킹, 지연 로딩(Lazy Loading)이나 더 가벼운 라이브러리를 사용하면 된다는 것은 많은 개발자 들이 알고 계신 것 같습니다. 이 포스팅에서는 Next.js의 Prefetching으로 인해 생기는 Unused Javascript에 대해서만 짧게나마 알아보도록 하겠습니다.

Next/Link와 Prefetching

---

Next.js는 Prefetching을 통해서 사용자가 경로를 방문하기 전에 미리 로드를 하도록 도와줍니다. 이 경로를 가져오는 방식으로 아래 두 가지를 사용하고 있습니다.

• Next/Link
• router.prefetch()

특히 Next/Link는 처음 페이지가 로드되는 시점 및 스크롤 이동이 생기면 사용자가 보고있는 뷰포트를 확인하고 보인다면 Prefetching을 시도합니다. 이렇게 미리 로드를 하는 이유는 Next.js는 SPA와 같이 초기 로드 시에 모든 리소스를 다운로드 하지 않기 때문에 다음 페이지 이동 시 오래 걸릴 수 있기 때문입니다.

중요한 점은 이 Prefetching으로 인해 Unused Javascript가 생길 수 있습니다.

다행히도 Prefetching은 옵션을 통해 끄고 킬 수 있기 때문에 상황에 맞게 사용하는 것이 가장 중요합니다. 하지만 옵션이 있더라도 유저가 자주 방문하는 페이지들에 대해서는 이 옵션을 끄는 것이 불편하게 느껴질 수 있습니다.

이런 경우들에 대해선 최소한 Dynamic Import를 이용해 특정 코드를 지연 로딩 처리를 잘 사용해주어야 합니다. react-highcharts와 같이 라이브러리의 크기가 큰 경우에는 해당 라이브러리를 사용하는 컴포넌트를 지연 로딩하여 Prefetching을 하더라도 비교적 크기가 작도록 줄인다면 좋겠네요.

코드 분할이나 지연 로딩 등에 대한 부가 설명을 따로 하지 않고 Prefetching에 대해서만 설명하다보니 글이 엄청 짧게 느껴지네요.😅

마무리로 Dynamic Import를 시도할 때는 CLS에 영향이 가지 않도록 로딩 상태를 잘 처리해두면 UI와 성능 둘 다 잡을 수 있지 않을까 싶습니다.

감사합니다.