레벨4 프론트엔드 성능 베이스캠프 2 - 필요한 것만 요청하기

프론트엔드 성능 베이스캠프의 두 번째 주제는 필요한 것만 요청하기이다. 간단하게 생각해서 당장 필요 없는 모듈은 불러오지 않다는 것이다.

 

이와 관련하여 구체적인 요구사항은 다음과 같다.

• Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다.
• react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다.

이번 챕터에서는 이러한 요구사항을 만족하기 위해 작업한 과정을 다룬다.

---

1. 준비과정

빌드가 되었을 때 번들된 파일이 어떤 모습인지 먼저 확인해 보자. 눈으로 보면서 비교하는 것이 중요한데 이를 도와주는 것이 Webpack Bundle Analyzer라는 도구(플러그인)이다. 이를 통해 번들된 파일에 어떤 모듈이 얼마나 크기를 차지하는지 알 수 있다.

1-1. Webpack Bundle Analyzer 설치

webpack-bundle-analyzer

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

1-2. Webpack Bundle Analyzer 적용

Webpack Bundle Analyzer을 적용하기 위해 webpack에 다음과 같이 코드를 추가하자.

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    // ...
    new BundleAnalyzerPlugin(), // -> BundleAnalyzerPlugin 플로그인 추가
  ],
  //...
};

1-3. Webpack Bundle Analyzer 실행 및 결과

이후 서버를 재실행하면 다음과 같이 bundle.js에 어떤 모듈이 얼마만큼 차지하고 있는지 눈으로 확인할 수 있다.

참고로 dev환경이다.

dev 환경에서 bundle.js

---

2. React.lazy 적용하여 페이지에 필요한 모듈만 불러오기

현재 메인 페이지에 접속을 하게 되면 bundle.js 하나만 불러온다. 여기에는 메인 페이지에서 사용하는 않는 모듈도 포함되어 있다. 때문에 사용하지 않는 모듈로 인해 성능만 낮아진다.

react lazy 적용 전

이를 React.lazy을 사용하여 각 페이지에서 필요한 모듈만 불러올 수 있도록 해보자.

2-1. React.lazy이란?

React.lazy를 적용하면 컴포넌트가 렌더링 될 때까지 컴포넌트의 코드의 로딩을 지연시킬 수 있다. 즉, 어느 페이지에서 용량이 큰 라이브러리를 사용한다고 했을 때, 이를 미리 불러오는 것이 아니라 해당 페이지가 로드될 때 불러오게 된다.

const App = () => {
  return (
    <Router>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/search" element={<Search />} />
      </Routes>
      <Footer />
    </Router>
  );
};

위 코드를 살펴보면 이 서비스에서는 두 개의 페이지로 라우팅을 할 수 있다. 하나는 /이고 다른 하나는 /search이다. 이때, /search 페이지가 로드된다면 Search 컴포넌트가 렌더링이 되는데 Search 컴포넌트에는 Home 컴포넌트에서 사용되지 않고 용량이 큰 라이브러리가 있다고 생각해 보자. 사용자가 /으로 접속했을 때, 당장 사용하지도 않는 라이브러리 때문에 렌더링이 시간이 늘어나게 된다. 이를 해결할 수 있는 것이 바로 React.lazy이다.

2-2. React.lazy 적용하기

일반적으로 컴포넌트를 import를 하기 위한 방법은 다음과 같다.

import Search from "./pages/Search/Search";

이를 다음과 같이 수정하자. 사용자가 /search로 바로 접근할 수 있기 때문에 Home 컴포넌트에도 React.lazy를 적용했다. 그리고 주의해야 할 점은 React.lazy를 적용하면 적용한 부분을 React.Suspense로 감싸주어야 한다는 것이다.

import { Suspense, lazy } from "react";

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

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>로딩중...</div>}>
        <NavBar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/search" element={<Search />} />
        </Routes>
        <Footer />
      </Suspense>
    </Router>
  );
};

추가적으로 webpack의 output의 filename을 bundle.[contenthash].js로 수정하였다.

2-3. 결과

기존에 하나였던 bundle.js가 4개로 나누어진 모습을 확인할 수 있다.

나누어진 bundle.js

또한 /에서는 필요한 모듈만 불러올 수 있게 되었다.

react lazy 적용 후

미션 요구사항인 Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다. 는 충족되었다. 다음 사진을 보면 giphy모듈은 bundle.29e15af867de2689b6ab.js 모듈이지만 /에서의 네트워크를 살펴보면 bundle.29e15af867de2689b6ab.js 모듈은 없다. 즉, 불러오지 않았다.

분리된 bundle.js

---

3. 사용하는 아이콘만 불러오기

3-1. 얼마나 사용하고 있나?

베이스 성능 캠프 프로젝트에서는 react-icons를 사용한다. 우선 프로젝트에서 얼마나 사용하고 있는지 살펴보자. vscode의 검색 기능을 활용하여 react-icons를 찾으면 다음과 같이 3개의 아이콘을 불러와 사용하고 있다.

react icons

그렇다면 사용하는 것만 실제로 불러오고 사용하고 있지 않는 것들은 불러오지 않고 있을까? 이를 Webpack Bundle Analyzer로 확인해 보자.

 

다음 사진은 develoment 모드로 서버를 실행시켰을 때 번들된 모듈을 나타낸 Webpack Bundle Analyzer이다.

모두 불러온 react-icons

이상한 점을 확인할 수 있다. 분명 아이콘 3개만 사용하고 있는데, react-icons 모듈의 크기를 살펴보면 600KB가 훌쩍 넘는다. 또한 눈으로만 봐도 엄청난 크기를 가지고 있음을 확인할 수 있다. 어떻게 개선할 수 있을까?

3-2. @react-icons/all-files 라이브러리 사용

결론부터 말하자면 나는 @react-icons/all-files를 사용하지 않았다. 그 이유는 아래에서 설명한다. 

 

이 라이브러리의 컨셉은 자신이 불러온 아이콘만 포함하여 imports를 한다는 것이다. 더 자세한 설명은 아래의 docs를 참고.

@react-icons/all-files

3-3. Tree Shaking

Tree Shaking이란 사용하지 않는 코드를 제거하기 위해 JavaScript 컨텍스트에서 일반적으로 사용되는 용어이다. webpack 4 이후부터 package.json의 "sideEffects" 프로퍼티를 통해 컴파일러에 힌트를 제공하는 방식으로 컴파일러에 힌트를 제공하는 방식으로 기능을 확장한다. 다음은 이에 대한 Webpack 문서이다.

Tree Shaking | 웹팩

3-4. Tree Shaking 적용... 그리고 실패? 성공?

사용하고 있는 react-icons의 아이콘만 불러오기 위해 여러 시도를 해보았다. 하지만 이를 해결하고자 새로운 라이브러리를 설치하긴 싫었다. 사용하고 있던 라이브러리를 버리고 다른 라이브러리를 설치하게 된다면 앞으로 같은 문제가 발생하더라도 해결책을 찾지 않고 대안책만 먼저 찾게 되지 않을까? 싶다. 물론 빠르게 문제를 해결하기 위해선 대안책이 가장 좋은 방법이 될 순 있지만 공부하고 입장에선 여러 시도를 해보고 싶었다.

 

우선 Tree Shaking은 CommonJS 모듈이 아닌 ES Module 방식에서 동작한다. 때문에 빌드되는 과정에서 ES Module로 변환되지 않도록 해야 한다. 이를 어떻게 할 수 있을까? 성능 베이스 캠프에서는 package.json의 bable 프로퍼티를 다음과 같이 수정하면 된다.

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      {
        "modules": false
      }
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }

modules을 false로 함으로써 ES Moldule이 빌드가 된 후에도 보존되게 된다.(다음 글 참고)

@babel/preset-env · Babel

그 이후에  package.json의 "sideEffects" 프로퍼티를 추가한다. 이때 값은 false이다.

{
  // ...
  "sideEffects": false
}

sideEffects는 부수효과로 어떤 모듈 다른 모듈에 영향을 주어 추가적인 영향을 미친다는 것이다. 하지만 제거하고 싶은 아이콘은 독립적이므로 부수효과가 없다. 즉,  false로 함으로써 사용하지 않는 export는 제거해도 괜찮다는 것을 webpack에게 알리는 것이다. 다음은 실제 react-icons/ai의 내부이다.

react icons ai

정말 수도 없이 아이콘들이 많다.(심지어 이런 폴더들이 여러 개...) 사용하지 않는 것들도 모두 필요할까? 깔끔히 제거하여 사용하는 것만 가져오는 것이 여러모로 좋다.

 

위와 같이 설정을 마무리하고 다시 dev serve를 실행시켰다. 하지만 결과를 이전과 동일하였다. 여러 기술 블로글 글도 보고 github에서 외국인 개발자들이 서로 토론하는 것도 보았지만 어떻게 dev serve에서 사용하지 않는 react-icons를 제거하는지는 아직 감이 잡히지 않았다. 

 

그러다가 문득 왜 계속 dev serve에서만 확인을 하는 거지?라는 의문이 들었고 production mode에서 build를 하였더니 다음과 같이 react-icons의 크기가 엄청나게 줄어든 것을 확인할 수 있었다.(너무 작으니 확대해서 보세요.) 심지어 더 재밌는 점은 위에 추가했던 설정들을 모두 지우고 확인을 해도 같은 결과라는 것이다. 아마 이는 webpack 4 이후부터 production mode에서는 최적화를 기본적으로 하는 것과 연관이 있어 보인다.

prod 모드로 build한 결과

그리고 이미 react-icons에서 각 아이콘 폴더마다 package.json에서 sideEffects를 false로 해두고 있다. 이도 관련이 있어 보인다.

react icons ai의 package.json

3-5. react-icons vs @react-icons/all-files

react icons tree shaking을 하고자 여러 레퍼런스를 찾는 도중, react-icons 자체에서 sideEffects를 언제 추가했는지가 궁금해졌다. 실제로 찾아본 결과 sideEffects만 추가한 것이 아니라 react-icons, @react-icons/all-files를 나누면서 자연스럽게 package.json이 생성되었고 이곳에 sideEffects도 포함된 사실을 알 수 있었다. 다음은 이에 대한 react-icons의 PR이다.

starting change project struct by kamijin-fanta · Pull Request #363 · react-icons/react-icons

또한 더 알게 된 점은 일단... 처음엔 @react-icons/all-files 라이브러리를 사용하기 위해선 이를 새롭게 설치를 해야 해서 react-icons와 다른 라이브러리인 줄 알았는데 그것이 아니라 서로 다른 차이점을 가진 같은 라이브러리인 것이다. 말이 조금 이상한데, 이 둘의 차이는 다음과 같다.

 

1. react-icons: 기본적인 package로 많은 아이콘들이 하나의 파일에 존재한다.

2. @react-icons/all-files: 최적화에 문제가 있을 때 사용하는 package로 한 파일엔 하나의 아이콘만 존재한다. 하지만 파일이 그만큼 많기 때문에 설치하는 데 오랜 시간이 걸린다.

 

...

 

아무튼 결론은 production mode로 build를 하게 된다면 알아서 잘 사용하지 않는 아이콘은 제거되기 때문에 별다른 작업을 하지 않아도 된다는 것이다.