Before

vendors-main.chunk.js가 너무 크더라..
그래서 어느 라이브러리가 이렇게 크기를 잡아 먹는지 궁금해서 분석해보기로 했다.

After

일단 필요 없는 라이브러리는 별로 없었는데,
너무 상위 라이브러리를 dependency로 갖는 것이 문제였다.

예를 들어서 @metaplex/js 같은 경우에는 account 중에서 Metadata 객체만 필요한데도 불구하고
transaction부터 시작해서, 필요없는 auction들까지도 다 dependency로 갖고 있다보니
필요없는 용량 크기를 잡아 먹고 있었다.

그래서 딱 필요한 부분만 설치하려고 @metaplex/js npm에 들어가보니
이 친구의 Dependency에 @metaplex-foundation/mpl-token-metadata가 있는데,
이것만 따로 설치하면 Metadata 객체를 사용할 수 있으니, 나머지 용량을 줄일 수 있었다.

이전에 @metaplex/js 모듈은 512.96kb 였지만
필요 없는 친구를 제거하고 나니 145.98kb 로 줄었다. 무려 72%...

또한 @solana/wallet-adapter-wallets, 이 친구도
지원하는 모든 wallet을 모듈로 갖고 있어서, 사용하지 않는 부분이 굉장히 많았다.
특히, torus-wallet이 차지하는 용량이 굉장히 컸는데, 이를 사용하지 않아
wallet들을 따로 설치하는 과정을 통해 800kb 가량을 줄일 수 있었다.

webpack-bundle-analyzer 아니었으면 얘가 이렇게 많이 차지하는지 몰랐을 것 같다.

앞으로 유용하게 써야할 듯

그래서 얼마나 줄었는데?

이전에 번들의 용량

필요 없는 디펜던시 삭제 후 용량 (library 2개 정도 수정)

약 50%가 줄었다. (2.4MB -> 1.3MB)

사실 페이지 로딩에 큰 영향을 주는 것 같지는 않고
빌드 타입이 140s -> 110s로 30초 가량 줄었다.