code Splitting, prefetch 로딩속도 개선

CSR의 대표적인 초기 로딩속도를 개선하기 위한 작업들을 수행해보았다.

 

1. React.lazy와 Suspense 적용하기

 

SPA의 대표적인 단점으로, 최초 로드시 필요하지 않을 수 있는 모든 파일을 다운받기 때문에, 초기 로딩속도가 길어진다는 점이 있다. 이를 개선하기 위한 대표적인 해결방법중 하나가 lazy Loading이다.

 

동적 load

 

해당 모듈이 필요할 때만 로드 → 코드 스플리팅(code splitting)과 지연 로딩(lazy loading)을 가능 → 사용자가 특정 페이지나 기능에 접근할 때 필요한 리소스만 다운로드

멍냥생활 서비스의 라우트는 다음과 같이 정의되어 있다.

const PATHS = {
  main: "/main",
  logIn: "/",
  signUp: "/signup",
  findPassword: "/find/pw",
  profiles: {
    detail: "/profiles/:userId",
    create: "/profiles/create",
    update: "/profiles/update/:userId",
  },
  posts: {
    detail: "/posts/:postId",
    create: "/posts/create",
    update: "/posts/update/:postId",
  },
  search: "/search",
  likes: "/likes/:userId",
  bookmarks: "/bookmarks/:userId",
  notFound: "*",
};

React.lazy와 React.Suspense를 사용하여 동적 라우트를 설정하는 목적은, 사용자가 특정 경로에 접근할 때 해당 컴포넌트를 동적으로 로드해서, 초기 로딩 시간을 최적화시키는 것 이다.

즉, 로딩을 지연시키므로 사용자가 초기에 사용할 확률이 높은 라우트는 지연을 시키지 않는것이 좋다.

 

👉🏻 logIn, main페이지는 제외시키고, 지연로딩을 적용해주었다.

 

BEFORE

 

AFTER

 

 

• DOMContentLoaded: 111ms → 81ms (27% 감소)
• Load: 152ms → 102ms (33% 감소)

 

 

2. 번들 사이즈 줄이기

 

Vite Visualizer로 Vite의 번들 크기를 시각해보았다.

가장 큰 영역을 차지하고 있는 라이브러리들은 lodash, firestore, emoji-pikcer 다음과 같다.

 

lodash-es

import { debounce } from "lodash-es";

 

기존에 사용하던 lodash는 CommonJS 모듈 시스템을 사용하고, lodash-es는 ES 모듈 시스템을 사용하기 때문에, Vite같은 번들러가 Tree Shaking이 가능해 사용되지 않는 코드를 번들에서 제거하여 빌드 경량화에 도움이 될 수 있다고 한다.

 

 

manualChunks

- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

build시, 이와 같은경고 문구가 뜨는데, 두번째 지시로는 build.rollupOptions.output.manualChunks 사용하라고 한다.

 

 

 build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
          firebase: [
            "firebase/firestore",
            "firebase/storage",
            "firebase/analytics",
          ],
          ui: [
            "@radix-ui/react-alert-dialog",
            "@radix-ui/react-dialog",
            "@radix-ui/react-dropdown-menu",
            "@radix-ui/react-label",
            "@radix-ui/react-popover",
            "@radix-ui/react-slot",
            "@radix-ui/react-tabs",
          ],
          lodash: ["lodash-es", "lodash-es/debounce"],
          emojiPicker: ["emoji-picker-react"],
        },
      },
    },
  },

 

👉🏻 크기가 큰 firebase, shadui, lodash, emojipicker를 별도의 청크로 분리하여 빌드 크기를 분할해주었다.

 

 

 

 

3. Prefetching

Prefetch를 사용하면 미리 리소스들을 fetch를 해두기 때문에, 로딩시간이 단축되면서 사용자 경험을 크게 향상시킬 수 있다.

  const handleClickPostCard = async () => {
    await queryClient.prefetchQuery(
      queryKey: [POST, post.id],
      queryFn: () => getPostByPostId(post.id || ""),
    });
    navigate(`/posts/${post.id}`);
  };

사용자가 방문할 가능성이 높은 페이지에 적용시키는것이 효율적인데, 메인페이지에서 사용자가 스크롤을 내려보다가 관심 있는 posrCard를 클릭하면 postDetail페이지로 이동하도록 구성되어있다. (유저 프로필이나, search결과로도 접근가능)

 

주로 click 또는 hover, Intersection Observer 통해 로드할 시점을 정의하는데, click을 제외한 경우는 더욱 빠른 로딩이 가능하지만, 불필요한 네트워크 요청이 많을 것 같다고 생각해 클릭시 prefetch하는 방식으로 결정하였다.