프로처럼 리액트 component 를 import 하기
2020년에 올라온 아티클 중에 이런 글이 있다.
리액트 프로처럼 리액에서 import components 사용하기
https://medium.com/swlh/import-components-in-react-like-a-pro-b1340cb76a1b
요약하자면 내용은 다음과 같다.
- impoirt 만을 모아두는 index.js 를 사용하자
- component/index.js 에 해당 디렉토리의 컴포넌트들을 import 해두자
- 그렇게 되면 외부에서 간결하게 사용할 수 있다.
- import {A, B, C} from 'import/component'
Tree Shaking 이슈
해당 글을 볼 당시에는 개발하기에 코드가 줄어들어서 좋은 방법이라 생각되어서 사용을 했었다. 이러한 패턴을 Barrel Pattern 이라고 한다.
다만 현재는 글의 본문에도 첨가가 되어 있듯이 위와 같이 사용할 경우 Tree Shaking 에 주의하여야 한다!
this pattern is only useful if all the components described in the index file are used, else it would cause issues in the tree shaking
https://bitsofco.de/what-is-tree-shaking/
성능 문제 이슈
프로젝트에서 위와 같이 사용하다가 성능 이슈를 맞이하게 되었다.
주의하라고 나온 글에서처럼 tree shaking 이 원활하게 되지 않아서 code splitting 이 잘 되질 않았다.
결과적으로 bundle.js 로 포함되는 배포 파일의 용량이 커졌다.
그리고 이는 화면 로딩이 오래 걸리는 성능 개선의 문제로 이슈화 되었다.
성능 분석
크롬 개발자 도구의 Network(네트워크) 와 Perfomance(성능) 탭을 통해서 초기 구동에 대한 프로세스를 분석하였다.
결과적으로 꽤 커다란 bundle.js 를 발견하였고 이를 확인한 결과 위와 같은 alias 를 모아두는 import 를 사용하여 tree shaking 이 잘 안 되서 code splitting 이 되지 않아 발생한다는걸 알 수 있었다.
좀 더 쉽게 말하자면 해당 화면에서 사용되지 않는 component 들까지 모두 js 파일로 배포가 된 것이다.
성능 개선
react 에서는 import 문을 주의하여 사용해야 한다.
import 를 할 경우 실제의 사용여부와 상관없이 사용하고 있다고 간주하여 해당 컴포넌트까지 사용한다고 판단하기 때문이다.
webpack에서는 automatic code splitting 이 어느정도 지원이 되고 있지만,
그러한 기능이 원활하게 동작하기 위해서는 tree shaking 에 신경써야하고,
import 문을 구분하여서 사용해야 한다.
회고
사실, 실제로는 사용하지 않고 import 만 하였어도 해당 컴포넌트가 포함된다는건 좀 이상하다.
번들링을 해주는 모듈에서 체크를 잘 한다면 import 를 남발하여도 실제로 import 된 후에 사용되었는지까지 체크를 해서 자동으로 개선되는 포인트를 늘릴 수도 있지 않을까? 하는 생각이 문득 든다
하지만 그러한 생각은 질문이자 개선점이지만, 현재에는 그러하지 않고 있다.
그렇기 때문에 이러한 점에 대해서 유의하여서 사용해야 한다.
