@loadable/component 이용한 Code Spliting

SPA의 특징으로 처음 로딩할 때 모든 페이지의 정보를 로드해야 합니다. 이때 프로젝트의 규모가 크다면 로드하는데 많은 시간이 필요하므로 Code Spliting으로 필요한 페이지만 로드해 rendering 할 수 있게 했습니다.

현재는 페이지나 프로젝트의 규모가 크지 않지만 그럴 때를 대비해 @loadable/component를 이용해 Code Spliting으로 성능 개선을 했습니다.

import React from 'react'
import { Switch, Route, useLocation } from 'react-router-dom'
import { useTransition, animated } from 'react-spring'
import { ROUTES } from 'utils/constants'
import loadable from '@loadable/component'

const HOME = loadable(() => import('pages/Main'))
const RESULT = loadable(() => import('pages/Result'))
const FILTERS = loadable(() => import('pages/Filters'))
const NotFound = loadable(() => import('pages/NotFound'))

const Routes = () => {
  const location = useLocation()
  const transitions = useTransition(location, (location) => location.pathname, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  })

  return transitions.map(({ item: location, props, key }) => (
    <animated.div key={key} className="absolute w-full" style={props}>
      <Switch location={location}>
        <Route exact path={ROUTES.HOME} component={HOME} />
        <Route path={ROUTES.RESULT} component={RESULT} />
        <Route path={ROUTES.FILTERS} component={FILTERS} />
        <Route component={NotFound} />
      </Switch>
    </animated.div>
  ))
}

export default Routes