웹 성능 최적화 // 번들링 최적화

 웹팩을 가이드라인을 따라 기본적인 동작원리가 이해가 되었다 싶어서 프로젝트의 번들링 결과를 확인해보았다.
 webpack을 eject를 통해 뜯어보는 것은 지양하라고 하여 방법을 찾던 중 강의에서 들었던 분석 라이브러리를 사용해서 보았다. 애니메이션 라이브러리와 page를 네임스페이스 패턴으로 작성한 스크립트가 비율이 엄청 크다는 것을 알 수 있었다.

이 부분에 대해서 코드 스플리팅을 해야겠다라는 생각이 들었다.

 두번째 사진이 코드 스플리팅 이후 번들링에서 index.js에 포함된 게임에 필요했던 모듈들이 제외되면서 번들 자체가 확실히 줄어든 것을 확인할 수 있었다. 두번째 이후 ICON.js에도 코드 스플리팅을 적용했을때 번들 자체가 확실히 줄어든 것이 눈에 띄었다.

 초보 수준의 번들링 최적화지만 결과가 눈에 보인다는 점이 참 좋았고 다음 프로젝트부터는 컴포넌트 설계를 공부를 하고 시작해야겠다는 생각이 들었다. 예를 들어 네임스페이스 패턴으로 ICON 객체를 활용하더라도 컴포넌트 설계가 되어있었다면 game 컴포넌트에 적용할 모듈과 나머지 컴포넌트에 적용할 모듈을 나눠서 작업하고 이를 통해서도 결과적으로 최적화가 될 것이라는 생각이 들었다.

코드 분할
큰 번들을 쪼개서 지금 불필요한 코드는 제외하는 방식