라이브러리 크기가 클 때 성능 개선하기 (코드 스플리팅, 부분 import)

이번에 Datepicker 때문에 antd library를 추가하게 되면서 라이브러리의 크기가 커서 성능이 떨어지지 않을까 우려되었습니다. 이를 줄이기 위해 여러가지를 시도해보았습니다.

모듈 사이즈 확인하기

분명 크기가 클 것 같은데 어느정도인지는 알 수 없어서 일단 자세한 설명을 보기 위해 터미널에 아래 명령어를 입력해주었습니다.

npm info antd

여러 항목 중 .unpackedSize: 50.3 MB 라는 내용이 눈에 띄었습니다. 이게 무엇을 의미하는건지 검색해봤더니 모듈이 다운로드되어 node_modules에 담겼을 때의 사이즈를 말하는 것이었습니다. 라이브러리가 최종적으로 만들어졌을 때의 사이즈라고 이해해도 되지 않을까 싶습니다. Finder로 확인해보니 정말 사이즈가 같았습니다.

제가 줄여야 하는 건 production 단계의 bundle size이기 때문에 이를 확인할 방법을 찾아보았습니다.
첫번째 방법 - BundlePhobia
BundlePhobia 라는 사이트에서 원하는 라이브러리를 검색하면 된다고 합니다.

antd 라이브러리를 검색해보았더니 위처럼 번들 크기와 다운로드하는 데 걸리는 시간을 알 수 있었습니다. 이 중 minified와 gzipped가 무엇인지 궁금했는데 minified는 띄어쓰기나 주석 같은 코드에서 불필요한 요소들을 제거한 뒤의 크기이고, gzipped는 gzip 압축을 통해 줄어든 사이즈를 말한다고 합니다. gzipped된 사이즈가 실제로 네트워크에 전송되는 사이즈를 반영하므로 이 부분이 페이지의 성능에 영향을 미친다고 합니다.

dayjs는 2.9kB, react-hook-form이 9.1kB로 나오는걸봐서 어마어마한 크기라는 것을 알 수 있었습니다. 최적화가 꼭 필요하다고 다시금 깨달았습니다. 검색 결과를 아래로 스크롤해보니 Date Picker는 gzipped size가 100kB 정도였습니다. 물론 이것만으로도 크긴하지만 이것만 모듈에서 빼와서 따로 설치할 수는 없는건지 다른 좋은 방법이 있는건지 궁금했습니다.

두번째 방법 - webpack-bundle-analyzer 사용
빌드 후 번들링된 자바스크립트를 이해하기 쉽게 보여주는 모듈입니다. 설치법은 다른 곳에 잘 나와있으니 생략하고 공식 페이지만 첨부하겠습니다.
작업중인 프로젝트 기준으로 아래와 같이 입력하면 번들을 정리해 한눈에 보여주는 html이 생성되어 뜹니다.

ANALYZE=true yarn build

왼쪽 패널을 열어 parsed나 gzipped를 보면 되는데 parsed가 특히 중요하다고 합니다. parsed는 실제로 쓰일 코드라 얼마나 많은 코드가 다운로드 될지를 결정하기 때문에 사용성에 많은 영향을 줍니다. 또 gzipped는 네트워크에서 번들의 전송속도를 결정하기 때문에 이 부분도 좋은 퍼포먼스를 위해 중요합니다.
각 번들을 선택하면 세부적으로 어떤 모듈이 들어있는지도 확인할 수 있어 필요없거나 분리할 수 있는 모듈을 구분하는 데 유용합니다.

번들 사이즈 줄이기

첫번째 방법 - 웹팩으로 코드 스플리팅하기
웹팩 공식문서에 따르면 코드 스플리팅이란 코드를 여러 번들로 쪼개어 필요할 때만 로드될 수 있도록 하는 것입니다. 그 중 dynamic imports라는 방법을 사용해 볼 수 있습니다.
lazy loading과 Suspense의 조합으로 아래처럼 구현해보았습니다.

const DatePicker = lazy(
    () => import('@components/forms/DatePicker'),
);

<Suspense fallback={""}>
  <DatePicker
    name={'withdrawalDate'}
    value={value}
    handleChange={handleChange}
  />
</Suspense>;

이렇게 구현했더니 Datepicker가 들어간 각 페이지 별로 70kB 정도를 줄일 수 있었습니다.
두번째 방법 - 부분 import 사용하기
부분 import는 규모가 큰 라이브러리에서 필요한 부분만 import해올 수 있게 도와줍니다. 별도의 라이브러리 설치 없이 구현하기 위해서는 아래와 같이 import해주면 됩니다.

// 이렇게 말고
import { DatePicker } from 'antd';

// 이렇게
import DatePicker from 'antd/lib/date-picker';

하지만 위의 방법이 불편할 때가 있을 것입니다. 첫번째 방법으로 import하고 싶을 때는 babel-plugin-import와 같은 라이브러리를 사용해볼 수 있습니다.
사용법은 아래와 같습니다. 먼저 babel-plugin-import를 프로젝트에 추가해줍니다.

yarn add -D babel-plugin-import

이후 아래 코드를 .babelrc 파일의 plugins array안에 추가해줍니다.

 ["import", { "libraryName": "antd", "style": true }, "antd"]