code splitting, react lazy

🤔 code splitting

react 프로젝트를 빌드하면, 모든 코드(컴포넌트, 스타일)를 하나 또는 여러 개의 파일로 묶는 번들링 과정을 거치게 된다.

사용자가 사이트에 접속하면 이 번들링된 파일을 다운받는데, 사용자에게 당장 필요하지 않은 파일들도 함께 포함되어 다운로드 된다.

메인 페이지('/')만 이용하는 사용자도 '/user', '/setting' 페이지 등의 코드가 포함된 파일을 다운받는다.

 

번들 사이즈가 커지면 초기 로드 시간이 오래 걸리기 때문에 서비스에 악영향을 끼칠 수 있다. 이 문제를 해결하기 위해 필요한 코드만 다운받을 수 있게하는 code splitting을 적용해 볼 수 있다. react는 dynamic import를 위한 lazy() 함수를 제공하고 있다.

 

🔮 라우트별 code splitting

import HomePage from './pages/Home/HomePage';
const NotFoundPage = lazy(() => import('./pages/NotFound/NotFoundPage'));
const SearchPage = lazy(() => import('./pages/Search/SearchPage'));
const FeedbackPage = lazy(() => import('./pages/Feedback/FeedbackPage'));

 

기존	lazy 적용

메인 페이지를 제외한 나머지 페이지에 lazy 적용 시, js 파일이 여러 파일로 분할된 것을 확인할 수 있다.

이제 사용자가 '/search' 진입 시, 검색 페이지 컴포넌트를 네트워크 요청을 통해 동적으로 가져온다.

 

🔮 Icon code splitting

날씨 아이콘을 모두 import하여 DayIcons, NightIcons 객체로 매핑하고 있다. 이로 인해 화면에 표시되지 않는 아이콘(비/눈)들까지 모두 로드되고 있다.

import DayClearIcon from './DayClearIcon';
import DayCloudyIcon from './DayCloudyIcon';
import DaySnowIcon from './DaySnowIcon';
import NightClearIcon from './NightClearIcon';
import NightCloudyIcon from './NightCloudyIcon';
import NightSnowFlurriesIcon from './NightSnowFlurriesIcon';
import NightSnowIcon from './NightSnowIcon';
(...import 낮/밤Icon from '';)

/**
 * 시간대별 날씨 아이콘 표시
 */
const WeatherIcon = ({ fcstTime, skyStatus, rainType }: WeatherIconProps) => {
  const hour = Number(fcstTime.slice(0, 2));
  const icons = hour >= 6 && hour <= 18 ? DayIcons : NightIcons;
  let Icon;

  if (rainType === 'NONE') Icon = icons[skyStatus];
  else Icon = icons[rainType];

  return Icon ? <Icon /> : <img src='' alt='' />;
};

export default WeatherIcon;

const DayIcons = {
  CLEAR: DayClearIcon,
  PARTLY_CLOUDY: DayPartlyCloudyIcon,
  CLOUDY: DayCloudyIcon,
  RAIN: DayRainIcon,
  RAIN_DROP: DayRainDropIcon,
  RAIN_AND_SNOW: DayRainAndSnowIcon,
  RAIN_AND_SNOW_FLURRIES: DayRainAndSnowFlurriesIcon,
  SHOWER: DayShowerIcon,
  SNOW: DaySnowIcon,
  SNOW_FLURRIES: DaySnowFlurriesIcon,
};

const NightIcons = {
  CLEAR: NightClearIcon,
  PARTLY_CLOUDY: NightPartlyCloudyIcon,
  CLOUDY: NightCloudyIcon,
  RAIN: NightRainIcon,
  RAIN_DROP: NightRainDropIcon,
  RAIN_AND_SNOW: NightRainAndSnowIcon,
  RAIN_AND_SNOW_FLURRIES: NightRainAndSnowFlurriesIcon,
  SHOWER: NightShowerIcon,
  SNOW: NightSnowIcon,
  SNOW_FLURRIES: NightSnowFlurriesIcon,
};

다음과 같이 lazy를 적용하면, 화면에 보여지는 아이콘들만 로드할 수 있다.

const WeatherIcon = ({ fcstTime, skyStatus, rainType }: WeatherIconProps) => {
  const hour = Number(fcstTime.slice(0, 2));
  const icons = hour >= 6 && hour <= 18 ? DayIcons : NightIcons;
  let Icon;

  if (rainType === 'NONE') Icon = icons[skyStatus];
  else Icon = icons[rainType];

  return Icon ? (
    <Suspense fallback={<IconLoading $width={24} $height={24} />}>
      <Icon />
    </Suspense>
  ) : (
    <img src='' alt='' />
  );
};

export default WeatherIcon;

const DayIcons = {
  CLEAR: lazy(() => import('./DayClearIcon')),
  PARTLY_CLOUDY: lazy(() => import('./DayPartlyCloudyIcon')),
  CLOUDY: lazy(() => import('./DayCloudyIcon')),
  RAIN: lazy(() => import('./DayRainIcon')),
  RAIN_DROP: lazy(() => import('./DayRainDropIcon')),
  RAIN_AND_SNOW: lazy(() => import('./DayRainAndSnowIcon')),
  RAIN_AND_SNOW_FLURRIES: lazy(() => import('./DayRainAndSnowFlurriesIcon')),
  SHOWER: lazy(() => import('./DayShowerIcon')),
  SNOW: lazy(() => import('./DaySnowIcon')),
  SNOW_FLURRIES: lazy(() => import('./DaySnowFlurriesIcon')),
};

날씨 아이콘과 동일하게 동작하는 다른 아이콘들에게도 lazy를 적용한 결과, index 번들 파일의 크기(597kb → 499.36kb)가 줄어들었다.

 

🚩 개선 결과

브라우저 네트워크 탭에서 확인한 결과

	개선 전	개선 후
transferred	629 kB	558 kB
resources	1.9 MB	1.7 MB