번들링에 대해 알아보자

     

목차

 

 

모듈의 등장

원래 자바스크립트는 모듈로 가져오거나 내보내는 방법이 없었다.

때문에 하나의 파일에 모든 기능을 담아야 했다. 현대의 웹으로 넘어오면서 프로그램을 모듈로 개발하고 배포할 수 있게 하기 위해 

cjs, amd, umd, esm 등 모듈 패턴이 등장하였다.

 

 

++추가 정보

cjs 와 esm의 차이점

cjs에서는 require와 module.exports를 사용하지만 esm에서는 import와 export를 사용한다.

 

cjs

• 동기적 로드: 모듈이 필요한 시점에 즉시 로드되고 해당 모듈의 코드가 실행될 때까지 다음 진행이 차단된다. 브라우저 환경에서 성능 혹은 동작에 문제가 생길 수 있다.
• 서버 사이드 혹은 런타임에서 사용된다.
• tree- shaking이 어렵다 (번들 사이즈에 영향 미침)
• 캐싱: 같은 모듈이 여러번 로드되어도 한번만 실행된다.

 

esm

• 비동기적 로드: top-level await 지원으로 가능하다.
• 정적 분석: 빌드 타임에 모듈 의존성을 파악할 수 있어 불필요한 모듈을 불러오지 않고 최적화할 수 있다.
• tree-shaking을 쉽게 할 수 있다.
• dynamic import: 리액트의 lazy, nextjs의 dynamic 처럼 번들러를 활용해 코드 스플리팅과 모듈 로딩 성능을 최적화할 수 있다.

 

번들링

모듈의 문제점을 보완하기 위해 기능별로 모듈화된 파일을 다시 하나로 묶어주게 된다.

번들링은 빌드 시에 파일이 하나로 묶이게 된다.

 

장점

• 각각의 파일로 나뉘어 있을 때는 서버에 리소스 요청도 여러 번 해야 하지만 번들링 하게 되면 묶어서 한 번만 요청하므로 네트워크 비용이 줄어들게 된다.
• 단순히 번들링 하는 역할만 하는 게 아니라 코드 난독화, 용량 압축, 최적화(Tree shaking) 등을 지원하기 때문에 성능 향상, 보안 등에도 도움이 된다.
• ES6 문법을 ES5로 변환해주는 기능이 있다.

 

번들러

번들링 기능이 있는 번들러에는 여러 가지가 있지만 대표적으로 웹팩이 있다. 웹팩은 가장 많이 사용되어 지는 번들러이다.
번들러의 주 역할은 서로 연관(의존성) 있는 여러 모듈을 하나의 번들 파일로 묶어주는 것이다.
웹팩은 자바스크립트 파일 뿐만 아니라 모든 형식의 파일을 모듈로 관리한다는 특징이 있다.

 

Webpack 구성 요소

Entry

각 모듈들이 바라보는 최상위 자바스크립트 파일을 정의한다.
웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.

 

Output

번들링 결과물을 어디에 생성하고 네이밍할지 정의한다.

 

Loader

JS가 아닌 여러 가지 타입의 파일(HTML, CSS, 이미지, 폰트)들을 웹팩이 이해할 수 있도록 해준다. 여기에 더해 ES6 문법을 ES5로 바꾸어주기도 한다. (Babel)
-> 웹팩은 JS만 이해할 수 있기 때문에 이런 과정이 필요한 것이다.

 

Plugins

번들링 된 결과물에 대해 적용할 수 있는 속성이다. 즉, 결과물의 형태를 바꾸는 역할을 한다.
ex) Uglify bundle(코드 난독화), Minify CSS(css to js파일을 별도의 번들로 분리) 등

 

 

 

트리 쉐이킹

트리 쉐이킹은 번들링 과정에서 불필요한 코드(사용되지 않는 모듈)를 식별하고 제거하는 기법

 

1. 코드 분석: 번들러는 모든 코드를 분석하여 사용되고 있는 모듈을 확인한다.

2. 불필요한 모듈 제거: 사용되지 않는 모듈은 최종 번들에서 제외된다.

3. 최적화된 번들 생성: 필요한 모듈만 포함된 최적화된 번들 생성한다.

 

 

-> 번들 사이즈 최적화는 lcp의 4가지 요소 중 리소스 로드 시간과 렌더 지연에 직접적인 도움을 준다.

 

 

참고

https://techbukket.com/blog/tree-shake

트리 쉐이킹(Tree Shaking) 이해하기: 웹 개발의 최적화 기법 | 테크버킷 블로그