JS. 코드 스플리팅 그리고 트리 쉐이킹

사실 이건 번들러에 대해 공부하다가 코드 스플리팅이란 걸 알게 되었는데, Live memo 프로젝트 기억이 나면서 정리가 필요할 거 같아서 작성해 본다.

먼저 간단하게 코드 스플리팅의 정의를 적고 가자. 코드 스플리팅은 말그대로 코드 분할인데 성능 개선 관련하면 나온다. 번들 코드를 분할하는 건데, 웹앱을 만들면 웹팩 같은 번들러가 코드를 번들하고, 번들된 코드를 브라우저에서 실행한다. 근데 이게 크기가 커질수록 성능이 안 좋아 지니까. 코드를 분할하는거다. 모든 코드를 한 번에 불러오지 않고 사용자가 필요로 할 때에 필요한 코드만 불러오는 개념이라 한다.  

기존에 import 구문을 실행코드로 내려서 사용한다 밑에처럼. 이걸 dynamic import라고 한다.

import('./somthing').then(thing => {
  console.log(thing);
});

이렇게 하면 웹팩이 알아서 코드를 분리해주고 사용할때 저 모듈을 불러온다고 한다. 내가 리액트에서 사용할 때는 위의 방식으로는 안되고 lazy를 사용해서 구현했다. 

조건은 리액트 컴포넌트를 포함하고 default export를 가진 모듈이어야 한다. 그리고 suspense 컴포넌트 하위에 렌더링 되어야 하고 fallback을 필수적으로 갖는데 이건 로딩할 때 컴포넌트를 보여주게 된다.

Live Memo app.js 코드

최적화에 대한 이야기가 나와서 또 다른 최적화 방식 중 하나가 트리 쉐이킹이라는데 이건 웹팩이 해주는 기능이라고 한다. 근데 개발자가 좀 알아둬야 할 부분이 있다고 해서 정리하려고 한다. 

첫 번째로는 babel이 ES6 모듈로 된 패키지들을 CommonJS로 바꿀 수 있기 때문에, 바꾸지 못하게 만들어줄 필요가 있다. 왜냐면 CommonJS 상태면 트리 쉐이킹을 쓰지 못한다고 한다. 그래서 babelrc 가서 preset-env에 modules를 false로 해주면 된다.

두 번째로는  SideEffects 활용하는 방법이라는데, 한 함수가 자신 스코프 밖에 영향을 준다면 트리 쉐이킹을 하지 않는다고 한다. 그래서 개발자가 판단하여 괜찮다면 트리쉐이킹을 하도록 sideEffects를 꺼주면 된다. package.json에 가서 false로 바꿔주자

마지막은 모듈을 import 할 때 원하는 모듈들만 따로 빼서 해주는 거라고 한다. 근데 이게 dev build에서는 어차피 모든 모듈 가져온다고 한다. 그래도 프로덕션 빌드에서는 더 작게 만들 수 있다.

구체적인 성능과 확인하는 방법은 밑에 블로그에서 보면 될 거 같다.

 

이러한 최적화를 웹팩에서 제공한다는데, 생각보다 번들러라는 친구가 많은 것을 하는 거 같다. 그래서 다음엔 번들러에 대해 알아보자

 

참고 : 

https://yceffort.kr/2021/08/javascript-tree-shaking

Home

https://velog.io/@code-bebop/dynamic-import%EC%99%80-React.lazy

dynamic import와 React.lazy

https://codingmoondoll.tistory.com/127

프론트엔드 성능 최적화 - 3. 코드 스플리팅 & 트리 쉐이킹