댕댕어디가 리팩토링 - #1 Code Splitting

처음에 Lighthouse를 돌리면서 모든 페이지의 점수를 확인하다보니, 네트워크 탭에서 현재 여는 페이지와는 상관없는 jsx파일들이 로드되고 있는 걸 발견했다.

검색페이지 네트워크탭

딱 보니까 route설정을 잘못해놨었던 것 같길래 찾아보니

import Home from '../pages/Home';
import Login from '../pages/Login';
import Search from '../pages/search/Search';
import PetRegisterPage from '../pages/pet/PetRegisterPage';
...

AppRouter.js가 모든 페이지를 한번에 import하고 있어서 그런거랬다.

 

그래서 해결방법은

lazy() + Suspense로 코드 스플리팅하면 된다고 한다.

 

💡 코드 스플리팅(Code Splitting)이란?

코드 스플리팅(Code Splitting)은 웹 애플리케이션의 JavaScript 번들을 여러 개의 작은 파일로 나누어 필요한 시점에만 로드하는 최적화 기법

✅ 목표:

• 초기 로딩 속도 개선 (필요한 코드만 로드)
• 사용자가 필요할 때만 해당 코드 불러오기 (Lazy Loading)
• 브라우저 성능 최적화 (메모리 사용량 감소

✅ 개선 효과:

• 사용자가 페이지에 방문하기 전까지 해당 파일을 로드하지 않음.
• Suspense의 fallback을 활용해 로드 중인 화면을 표시할 수 있음.

📌 코드 스플리팅 적용한 React Router 예제

import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

// ✅ 코드 스플리팅 적용
const Home = lazy(() => import("../pages/Home"));
const Login = lazy(() => import("../pages/Login"));
const Search = lazy(() => import("../pages/search/Search"));

const AppRouter = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/search" element={<Search />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default AppRouter;

 

코드를 적용 후 배포서버에 올려봤더니 점수가 다 올랐다..!

(로컬에서 돌리는 거랑 배포하는 거랑도 점수 차이가 좀 난다.. 아마 배포하면 vercel에서 압축해서 올려주는 것 때문인듯 싶다)

검색페이지

장소 상세페이지

내 방문리스트

즐겨찾기

 

이제 앞으로 한 페이지씩 점수를 올리기 위해 리팩토링 작업을 진행할텐데, 리팩토링과정을 적으면서 각 페이지 구현에 대한 회고도 한번 해보면 좋을 것 같다 ㅎㅎ