프론트엔드 첫걸음

모듈번들러의 정의와 작용 본문

로그/칼럼

모듈번들러의 정의와 작용

차정 2022. 9. 20. 20:24

https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2

 

What is module bundler and how does it work?

understand how module bundler works

dev.to

 

<html>
  <script src="/src/foo.js"></script>
  <script src="/src/bar.js"></script>
  <script src="/src/baz.js"></script>
  <script src="/src/qux.js"></script>
  <script src="/src/quux.js"></script>
</html>

 

Http 요청 5번 보다  번들파일 1번의 요청이 더 효율적이다

<html>
  <script src="/dist/bundle.js"></script>
</html>

 

 

이렇게 자바스크립트 파일을 번들링하는 데에는 몇가지 문제가 따른다.

1. 파일 순서 2. 이름충돌 방지 3. 사용되지 않은 파일 확인

 

번들링은 웹팩방식과 롤업방식이 있는데,,
웹팩방식은 파일명으로 맵핑, 함수로 모듈을 감쌈 . webpackStart 함수로 시작됨
롤업방식은 그냥 전역으로 선언하고, 파일명$함수명 으로 함수명을 바꿔서 이름충돌 방지함
롤업방식이 런타임 오버헤드가 적으나 순환의존성에서 작동 않는 단점이 있다. 모듈간 순환의존성이 발생하면 경고를 표시한다. 
순환의존성 없게 코드 짜라.