재택근무 환경에서 React 프로젝트 번들 크기 최적화

배경

코로나로 인한 재택근무 전환 이후, 사용자들의 네트워크 환경이 다양해지면서 초기 로딩 속도 개선 요청이 들어왔다. 기존 번들 크기가 2.3MB로 측정되어 최적화 작업을 진행했다.

번들 분석

먼저 webpack-bundle-analyzer를 설치해 어떤 라이브러리가 용량을 차지하는지 확인했다.

npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

moment.js가 500KB 이상을 차지하고 있었다. date-fns로 교체하여 200KB 절약했다.

코드 스플리팅

React.lazy와 Suspense를 활용해 라우트 단위로 코드를 분리했다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Reports = lazy(() => import('./pages/Reports'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/reports" component={Reports} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}

결과

• 초기 번들: 2.3MB → 850KB
• FCP(First Contentful Paint): 3.2s → 1.4s
• TTI(Time to Interactive): 5.1s → 2.3s

동적 import를 활용한 코드 스플리팅이 가장 효과적이었다. 추가로 이미지 lazy loading과 tree shaking도 검토 중이다.