번들링에 대해 알아보기 전에 모듈이 뭔지 알아보겠다
모듈(module)
JS에서의 모듈은 특정 기능을 하는 작은 코드를 각각의 파일로 만들어 다른 파일에서 재사용 가능하게 하는 것이라고 말 할 수 있겠다
function sum(a, b) {
return a + b;
}
export default sum;모듈을 사용하는 이유
// a.js
var num = 10;
function getNum() {
console.log(num);
}// b.js
var num = 20;<html>
<head>
</head>
<body>
<script src="./a.js"></script>
<script src="./b.js"></script>
<script>
getNum();
</script>
</body>
</html>
위의 경우 변수 이름이 겹쳐 마지막에 로드된 b.js의 20을 출력한다
이런한 변수 유효 범위, 이름 겹침과 같은 문제들을 모듈을 사용해 해결 할 수 있다.
하지만 모듈을 사용하면 자바스크립트 파일이 많아지고 그로 인해 자바스크립트를 다운로드 받은 http 요청이 많아진다
http요청이 많아지면 그로 인해 초기 로딩 속도 증가 함으로 초기 로딩 속도가 느려진다는 단점이 있다
이러한 문제를 번들링으로 해결 할 수 있다
번들링(bundling)
번들링 번역하면 묶음이라는 뜻이다 어플리케이션을 구성하는 많은 파일들을 같은 파일끼리 묶어 하나의 파일로 만드는 것이 번들링이다
번들링하는 이유
많은 파일들을 하나로 만들기 때문에 위에 모듈을 사용했을때의 단점을 보안해줄수 있다 (http 요청 개수 줄임)
번들링을 해주는 번들러가 있는데 그 종류가 다양하다
- webpack - 가장 유명하다
- esbuild
- parcel
- browserify
- snowpack
- rollup
마무리
이번 기회에 번들링에 대해 알아보았다 사실은 웹팩을 사용해 보고 글을 쓰려고 했지만 웹팩을 그냥 사용만 하는것 보다
왜 사용하는지에 대해 알아보고 싶어서 번들링에 대해 조사해봤다
다음에 webpack이나 다른 번들러 사용 방법을 정리해 보겠다
728x90
'JS, TS' 카테고리의 다른 글
| ==, ===, ====??? - js 동등 연산자 알아보기 (0) | 2024.03.11 |
|---|---|
| type이랑 interface 뭐가 다른거였어...? - type과 interface 차이 알아보기 (0) | 2024.02.26 |
| history API (0) | 2024.02.04 |
| I am 호이스팅 에요. (3) | 2024.01.27 |
| js 개발자라는 사람이 스코프가 뭔지 몰라? (0) | 2024.01.23 |
