번들파일과 병목현상 질문

안녕하세요 재밌게 강의 듣고 있습니다.

번들파일을 분석하여 사용중인 모듈을 확인 하는 방법을 잘 알았습니다.

code splitting을 통해 특정 페이지에서 필요없는 기능을 빼려는 이유도 잘 알겠습니다만..
특정 페이지에서 사용하지 않는 기능은 어떻게 찾아낼 수 있을까요?

현업에선 엄청 많은 모듈과 기능들이 한 페이지 안에 담겨있을텐데 어디까지 쓰는 것이고 빼내야한다는 근거를 찾는 방법이 있나요? (시간 오래걸리는것만 빼내는건지.. 궁금합니다.)

두번 째로 병목 현상에 관련하여

GC의 경우도 이미 Article컴포넌트의 존재를 알고 그 안에 removespecial character가 1번만 일어나야된다는 것을 안다고 가정하고 GC가 여러번 일어난 것에 의심을 하는 것이 맞나요?

GC랑 렌더링 성능시간이랑 크게 상관이 있는건지도 궁금합니다..!

안녕하세요, 박동환님

1. 코드 분할의 근거

보통 코드 분할은 초기 로딩 시, 당장 필요하지 않은 모듈을 떼어내기 위해 사용됩니다. 즉, 이상적인 서비스라면 당장 사용하지 않는 모듈은 모두 분리하는 것이 좋습니다. 다만, 크게 성능에 차이가 있지 않다면 그냥 하나로 둬도 됩니다. 또한 너무 잘게 파일이 쪼개지는 것도 지양하는 것이 좋습니다. (걱정할 정도로 많이 쪼개는 경우는 잘 없기 때문에 크게 신경쓰진 않아도 됩니다.)
예를 들어, 보통 암호화 관련된 라이브러리들의 사이즈가 큰 편인데요. 해당 기능을 페이지라 로딩되는 순간 부터 사용하게 된다면 굳이 코드 분할을 할 필요는 없습니다. 하지만 페이지가 로드되고 사용자가 어쩌다가 한 번 이 기능을 사용하게 된다면 굳이 처음부터 이 암호화 라이브러리를 하나로 묶어둘 필요가 없이 분리해두고 초기 로딩 속도를 개선하는게 좋을 것입니다.

2.병목 현상 의심 근거

GC는 사용하지 않는 메모리가 있을 때나 너무 많은 메모리가 사용되어서 메모리를 지속적으로 확보해야할 때 발생합니다. 즉, 예제 코드에서 GC가 빈번히 발생했다는 것을 보고, 메모리 관련 문제가 있다는 것을 알 수 있습니다. 여기서부터 의심을 시작하고 더 자세히 분석해 나갈 수 있는 것이지요.

그리고 이 서비스를 본인이 직접 개발했다는 가정하에 봤을 때, remove 함수가 한 번만 호출되어야 한다는 것을 알고 있을 겁니다. 즉 끊어져 있는 remove 함수 그래프가 사실은 하나인데 GC 때문에 끊겼고 해당 함수가 실행되는 과정에서 비효율적인 메모리 사용이 발생하고 있다는 것을 알 수 있는 것이죠.

반대로 remove 함수의 존재를 모르더라도, 특정 함수가 굉장히 많은 시간을 잡아먹고 있고 중간중간 GC가 빈번하게 발생하고 있는 것을 봤다면 충분히 의심해볼 수 있을 것입니다. GC에 대해서 잘 알고 있다면 함수가 사실은 하나의 작업이라는 것을 유추해볼 수도 있고 그게 아니더라도 해당 함수를 서비스에서 직접 검색해보므로써 로직을 확인해볼 수 있겠죠. (그래서 서비스에 대한 이해도가 높아야 최적화도 잘 할 수 있다고 말하는 이유입니다.)

물론 이 서비스도 잘 모르고 GC가 무엇인지, 왜 발생하는지도 모른다면 쉽지 않겠죠. (그래서 이 수업을 통해 배우는 거죠 ㅎ)

인프런 커뮤니티 질문&답변