[JavaScript] Bundling 이란?
번들링이란?
프로그래밍을 하다보면 번들링에 대해서 자주 듣게 된다. 사전적 의미의 Bundle은 "묶다. 꾸러미로 만들다" 의 의미를 가지고 있다. 그렇다면 왜 파일을 묶는 작업이 필요할 것인가에 대해 생각해 볼 수 있다.
번들리은 모듈들의 의존성을 관계를 파악 후 묶는 작업 즉 그룹화 해주는 것을 말한다.
모듈이 분리 되었던 이유는 간단하다. 작업의 효율성 문제이다. 스크립트가 커지기 시작하면 하나의 클래스 , 파일로 관리하기가 어렵고 감당이 안된다. 이러한 이유로 전부 떼어내어서 작업을 하기 시작했다.
원래부터 따로 분리 되어 있는 모듈이 아니기 때문에 독립적으로 존재하는 모듈은 아니다. 분리 된 모듈이 잘 작동하기 위해서는 연계성이 있어야한다. 그래서 모듈 내부에서는 import로 호출하고 export로 외부 모듈 접근을 허용하여 기능을 내보낸다.
분리된 자바스크립트 (JavaScript에 한정되는 것은 아님) 모아서 묶어 작업하는 것을 번들링이라한다.
번들링이 필요한 이유는 간단한다.
- 첫번째 여러개의 파일을 따로 로딩한다면 속도가 저하된다 (1번의 이유가 가장 크다고 생각한다. )
- 두번째 분리된 모듈간의 충돌 문제가 발생할 수 있다.
이를 도와줄 수 있는 대표적인 번들링 도구로써 Webpack, Borserify, Parcel, Vite등이 있다.
이중에서 대중적으로 많이 쓰이는 Webpack과 Vite를 알아보고자 한다.
WebPack
기존에 js를 작동 시키기 위해서는
1. 각 기능에 script를 포함시켜 구동
이 방법의 경우 너무 많은 script를 불러오면 병목 현상이 발생되는 문제점이 있다.
2. 모든 프로젝트 코드가 포함된 파일이 큰 js를 사용하는 점
과장되게 표현하긴 했지만 .. 다양한 문제를 발생시킬 수 있다. (유지관리, 가독성, 스코프 등등)
3 . 자바스크립트 변수 유효 범위
- 두개의 서로 다른 JS파일을 load 하더라도 같은 스코프를 공유한다. 예를 들면 첫 번째 파일에서 변수 A에 =5를 대입했다 하더라도 마지막 로드한 파일에서 A에 10을 대입하면 최종적으로 10이 저장되어 오류를 발생 시킬 수 있다. 이러한 문제는 ES6의 Modules 문법과 웹팩의 모듈 번들링 통해 해결 가능
4 . Dynamic Loading 과 Lazy Loading 미지원.
WebPack의 장점
- 다른 모듈 Bundle에 비해 퍼포먼스가 우수하다.
- Code Split 단위로 의존성 트리를 동기적, 그리고 비동기적으로 나눠 사용이 가능하다. - 3rd- party library에 모듈로 통하는 기능 제공 - 다양한 플러그인 제공.
WebPack의 단점 - ES6와 같이 브러우저에서 지원되지 않은 code를 babel-loader를 통해 변환하여 사용해야 한다. - 세팅에 생각보다 많은 노력을 들여야 한다. - vite와 대비 속도에서 차이가 난다.
vite
CRA와 Vite를 비교할 때 경험과 빌드 시간 측면에서 차이가 있다 개발을 위해 앱을 Bundling하는 동안 CRA는 코드에 변경 사항이 있을마다 앱 전체를 Bundling을 한다. Vite는 초기에 전체 앱을 묶고 변경된 파일만 묶는다. 이것은 빌드 프로세스를 더 빠르게 만들어준다.
공식홈에 따르면 기존에 있던 문제
- 지루할 정도로 길었던 서버 구동- 느렸던 소스 코드 갱신
에 대한 근본적인 문제를 해결 할 수 있다.
