프론트엔드 성능 최적화 가이드 리뷰 :: 마이구미

이 글은 "프론트엔드 성능 최적화 가이드" 라는 책을 리뷰한다.
본인은 평범한 프론트엔드 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다.
책 링크 - http://www.yes24.com/Product/Goods/115209526

 

 

"성능 최적화" 라는 용어는 모두가 관심을 가질 수 밖에 없다고 생각한다.

이 책도 관심을 끌 수 밖에 없는 제목이었고... 표지도 너무 아기자기해서 마음에 들었다.

 

우선 책의 목차 구성을 통해 대략적인 내용을 미리 파악할 수 있었다.

이미지, 폰트, 캐시, 로딩, 코드 분할 등 흔히 접할 수 있는 기본적인 문제들로 구성되어있다.

모든 것이 그렇듯... 성능 최적화도 trade-off 가 존재한다.

최적화라고 무조건 다 좋은 것은 아니기 때문에, 그것들을 어떻게 설명하고 있는지가 궁금해서 책을 읽게 되었다.

 

예를 들어, 코드 분할에 대해 살펴보자.

SPA 형태의 서비스는 하나의 번들 파일로 동작하기에, 용량이 커서 페이지 초기 로드 시간이 오래 걸릴 수 있다.

그래서 사용하지 않는 페이지, 컴포넌트 등의 코드를 분할하여 사용하는 시점에 로드하는 방식으로 성능을 개선할 수 있다.

 

하지만 실제로 사용하는 시점에 코드를 받아와야하기 때문에, 결국 그 시간동안은 UX 적으로 손해를 보게 된다.

그러면 분할은 하되, 필요할 시점 전에 미리 로드하면 되지 않는가? 라는 대안을 던질 수도 있다.

이 경우에도 미리 로드하는 시점을 정해야하고, 그 시점에 대한 고민도 필요할 것이다.

결론적으로 책을 읽게 된 이유는 이러한 고민들을 책에서는 어떻게 설명하고 있을까? 를 보고 싶었다.

 

---

책은 예제를 중심으로 다뤄지고 있어서, 직접 해보면서 쉽게 이해할 수 있도록 제작되었다.

그리고 성능 최적화에 있어서, 대안을 제시하되 그것이 끝이 아니라 trade-off 등과 같은 고민들도 설명해주고 있다.

 

개인적으로는 추천한다면, 프론트엔드 입문 또는 주니어 개발자에게 권하고 싶다.

책의 내용들은 현재 개발자들이 많은 실수와 오해하고 있는 부분들이 포함되어있다고 생각한다.

UX 와도 많은 관계가 있는 내용들이라서 프론트엔드 개발을 한다면, 읽어보면 좋을 것 같다.

 

---

 

개인적으로 몰랐었던 내용은 개발자 도구에서의 coverage 탭이었다.

존재는 알고 있었으나... 사실 볼 생각은 전혀 안했던 것 같다.

 

 

현재 사용되고 있지 않는 코드들의 비중을 나타내주고 있다.

* 물론 분기되어있는 코드들은 사용하지 않는 코드로 받아들이기 때문에, 실시간으로 비중은 변할 수 있다.

한번 실제 서비스에서 확인해보고 써먹어봐야겠다.