TIL_21.01.15 🏃🏽‍♂️🏃🏽‍♂️

Webpack bundle analyzer

웹팩으로 번들링한 파일 분석을 위해 사용한다.

CRA로 생성한 프로젝트는 cra bundle analyzer 를 사용.

불필요한 모듈이 번들링 파일로 같이 로딩된다? -> 성능저하

따라서 code spliting을 통해서 불필요한 리소스 줄이기 -> 로딩속도 향상

Code spliting

코드 분할 (번들 파일 쪼개기)

대표적인 패턴

1. 페이지 별 분할
2. 모듈 별 분할

불필요한 코드 또는 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로딩될 수 있도록 하는 것.

route-based-code-splitting

---

성능 최적화에 대해서 공부하면서 가장 크게 느낀 점은 여태 정말 아무 생각없이 코드를 작성했구나...

이래서 내 프로젝트에서 성능이 나오지 않았구나 반성이 된다.

지금이라도 성능 최적화 및 테스트에 관심을 가지고 공부하려고 해서 그나마 다행이다.