최근에 리액트로 프로젝트를 하면서 한 번에 여러 컴포넌트들을 불러오게 되면서

웹 성능이 떨어지는 일이 있었습니다.

이에 React.lazy를 통한 코드 스플리팅으로 성능을 개선해보고자 했습니다.

| 코드 스플리팅

리액트에서 개발을 하고 배포할 때 빌드를 하게 되는데 이때 보통 단일 Javascript 파일로 번들링 하게 됩니다.

이 방식은 애플리케이션의 크기가 커지면 초기 로딩 시간이 길어지는 문제를 야기할 수 있어서 코드 스플리팅을 통해 전체 번들을 더 작은 크기로 나누고, 이를 비동기적으로 로드할 수 있게 함으로써 로딩 시간을 개선하게 해주는 것을 코드 스플리팅이라 합니다.

| React lazy

리액트의 lazy와 Suspense로 필요할 때에 컴포넌트를 로드할 수 있도록 하려면

아래와 같이 코드를 작성하면 됩니다.

import { lazy, Suspense } from 'react';

const Component2 = lazy(() => import('./Component2'));

const Component1 = () => {

return (

<div>

</Suspense>

</div>

);

}

여기서 Component2는 Component1이 화면에 렌더링 될 때까지 로딩이 시작되지 않습니다.

이런 식으로 사용자가 실제로 Component2를 볼 필요가 있을 때까지 해당 컴포넌트로의 로드를 미룰 수 있습니다.

여기서 Suspense는 리액트가 컴포넌트의 로드를 기다리는 동안 보여줄 대체 UI를 정의할 수 있도록 해줍니다.

| 적용

제가 작업하던 프로젝트에 react router와 함께 적용해 보겠습니다.

main.tsx파일에서 아래와 같이 여러 컴포넌트를 한 번에 불러와 react router를 적용하고 있습니다.

import Cart from "./pages/Cart";

import Main from "./pages/Main";

import Category from "./pages/Category";

...생략

const router = createBrowserRouter([

{

path: "/",

element: <Main />,

{

path: "/cart",

element: <Cart />,

{

path: "/category",

element: <Category />,

...생략

]);

ReactDOM.createRoot(document.getElementById("root")!).render(

<React.StrictMode>

</React.StrictMode>

);

이런 식으로 되면 처음에 페이지에 진입 시 모든 페이지에 대한 정보를 불러오면서 초기 로딩을 느리게 만들 수 있습니다.

이때 리액트의 lazy를 사용하면 컴포넌트를 지연 로딩해서 필요한 스크립트를 그때그때 불러오도록 할 수 있습니다.

const Cart = lazy(() => import("./pages/Cart"));

const Main = lazy(() => import("./pages/Main"));

const Complete = lazy(() => import("./pages/Complete"));

...생략

const router = createBrowserRouter([

{

path: "/",

element: <Main />,

{

path: "/cart",

element: <Cart />,

{

path: "/category",

element: <Category />,

...생략

]);

ReactDOM.createRoot(document.getElementById("root")!).render(

<React.StrictMode>

</Suspense>

</React.StrictMode>

);

[React] React lazy로 웹 성능 최적화 하기 (코드 스플리팅)

[React] React lazy로 웹 성능 최적화 하기 (코드 스플리팅)