<aside> 💡 코드 스플리팅(Code-splitting)이 필요한 이유

SPA페이지는 처음 로딩시 전체 리소스를 한번에 다운 받는다. 인터넷 속도가 느려지거나 리소스가 점차적으로 커질 경우 로딩시간이 길어져 사용자경험 측면에서 좋지 못하다. 이를 해결하기 위해 코드 스플리팅을 사용하면 초기 번들 크기를 줄이고 사용자의 상호작용이 있을 경우 동적으로 코드를 로딩할 수 있다.

</aside>

개선전

lighthouse에서 확인 결과 로딩되는 JS용량이 11,038kib나 됬다.

코드스플리팅을 통해 이 용량을 줄여보도록 했다.

import MyPage from './pages/mypage';
import InnerCon from './components/common/InnerCon';
import HomePage from './pages/HomePage';
import LoginPage from './pages/auth/LoginPage';
import JoinPage from './pages/auth/JoinPage';
import SearchPage from './pages/search';
import SearchResultPage from './pages/search/SearchResultPage';
import MainLayout from './components/common/MainLayout';
import LayoutWithHeader from './components/common/LayoutWithHeader';

... 로직 생략

기존에 App.tsx에서 컴포넌트들을 import 해와 라우팅 처리를 하고 있었다.

모든 js번들에 사용자들이 마주하지 않는 컴포넌트들도 포함되게 된다.

개선후

const HomePage = lazy(async () => import('./pages/HomePage'));
const MyPage = lazy(async () => import('./pages/mypage'));
const InnerCon = lazy(async () => import('./components/common/InnerCon'));
const LoginPage = lazy(async () => import('./pages/auth/LoginPage'));
const JoinPage = lazy(async () => import('./pages/auth/JoinPage'));
const SearchPage = lazy(async () => import('./pages/search'));
const SearchResultPage = lazy(
  async () => import('./pages/search/SearchResultPage')
);
const MainLayout = lazy(async () => import('./components/common/MainLayout'));
const LayoutWithHeader = lazy(
  async () => import('./components/common/LayoutWithHeader')
);

... 로직 생략

App.tsx에서 라우팅 되고 있는 컴포넌트들에 lazy.import 처리를 해주었다. lazy.import가 코드 스플리팅 방

중 하나인데 사용자가 필요한 시점에 컴포넌트가 동적으로 로딩되게 된다.

그 외 다른 컴포넌트에서 사용되는 modal 컴포넌트들도 lazy.import 적용을 해줬다

5