번들(bundle)과 번들링(bundling)

🐣 번들(bundle)과 번들링(bundling) 그리고 모듈(module)

---

혹시 번들링과 모듈 번들러에 차이에 대해서 자세히 설명할 수 있을까? 머뭇거렸다면 정리된 글을 통해 번들링과 모듈 번들러에 대해서 한 번 살펴보자. 그리고 이어서 웹팩(Webpack), 바벨(Babel), 폴리필(Polyfill) 그리고 비트(Vite)까지 순서대로 차례차례 정리해볼 것이다. (물론 이전에 Notion 정리했던 개념들을 또 다시 긁어와서 정리하는 것이지만..!) 오늘도 레츠꼬우!
 

https://velog.velcdn.com/images%2Fsyoung125%2Fpost%2F2531e32c-b82c-40cf-8df1-522785202a3a%2Fimage.png

 

 

🐣 번들(bundle)

---

1. 개념

"번들"은 여러 리소스(예: JavaScript, CSS, 이미지 등)를 보다 관리하기 쉬운 형식으로 결합하는 단일 파일 또는 파일 세트를 의미. 번들은 웹 애플리케이션을 로드하기 위해 브라우저에 제공.

 

🐣 번들링(bundling)

---

1. 개념

사전적 의미는 '어떤 것을 묶다, 모으다' . 웹 개발에서 번들링은 여러 코드와 다양한 프로그램을(JavaScript 파일, CSS 파일, 이미지 등)을 가져와 단일 파일 또는 몇 개의 파일로 결합하는 프로세스. 이 프로세스는 웹 애플리케이션의 로딩 시간을 최적화하고 종속성을 보다 효과적으로 관리하는 데 도움. 번들링은 빌드 과정 중 하나로, 최종적으로 번들링된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행. 
* 빌드, 번들링, 변환 이 세 단어 모두 같은 의미

여러 코드와 프로그램을 묶어 웹 애플리케이션을 사용자에게 제공

참고로 웹팩 등을 번들링 도구들을 살펴보기 전에 번들링 개념 자체로만 봤을 때는 여러 JavaScript 파일을 하나의 파일로 수동으로 연결한다.
 

2. 번들링이 중요한 이유는?

여러 파일을 하나 또는 몇 개의 파일로 결합하여 HTTP 요청 수를 줄여 로드 시간을 향상. 종속성 관리를 단순화하고 필요한 모든 모듈이 올바른 순서로 포함되도록 보장. 함께 묶을 수 있는 더 작고 재사용 가능한 모듈로 코드를 구성하는 데 도움.

  2-1. 파일 크기 

번들링은 결과물 파일들을 압축하여 크기를 줄임. 번들 파일은 번들링되지 않은 원본 파일보다 작아지고, 실행 속도와 로딩 속도도 향상. 

  2-2. 애플리케이션 임의 조작 방지

번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없음. 번들링되지 않은 원본 코드에 접근할 수 있다면, 사용자가 의도하지 않은 조작을 할 수 있음. 번들링은 애플리케이션의 무결성과 보안을 강화.

  2-3. 파일 단위 모듈 관리

JavaScript는 기본적으로 전역 범위를 가지므로 여러 개의 JavaScript 파일이 있을 때 변수 충돌 등의 문제가 발생할 수 있음. 번들링 도구인 Webpack은 모듈 번들링을 통해 이 문제를 해결.
 

3. 번들링과 모듈

모듈은 코드베이스의 개별 기능 단위 이고, 번들링은 여러 파일을 하나 또는 몇 개의 파일로 결합하여 HTTP 요청 수를 줄여 로드 시간을 향상. 종속성 관리를 단순화하고 필요한 모든 모듈이 올바른 순서로 포함되도록 보장. 함께 묶을 수 있는 더 작고 재사용 가능한 모듈로 코드를 구성하는 데 도움.
 

4. 번들링 도구? 

 
번들크기를 최소화 하여 웹 애플리케이션의 성능을 향상시키고, 코드유지 관리를 용이하게 하는데 도움을 주는 도구들

• Webpack
• Parcel
• Rollup

 

🐣 모듈(module)과 번들러

---

1. 개념

모듈은 코드베이스의 개별 기능 단위. 번들링이란 모듈들의 의존성을 파악하여 그룹화 시켜주는 것이고, 반대되는 개념으로을 모듈(module)이라 할 수 있음. 분리되어 있는 모듈을 하나로 합쳐주는 것이 번들(bundle)이라는 개념이고, 여러 모듈로 나누어 export로 내보내기도 하고, import로 가져오기도 함. 
 

2.  모듈 및 모듈 시스템?

ES6 모듈: 함수, 객체 또는 프리미티브를 가져오기 및 내보내기할 수 있는 JavaScript의 기본 모듈 시스템. CommonJS: require를 사용하여 모듈이 동기적으로 로드되는 Node.js에서 사용.
 

3. 모듈 번들러

'모듈' 과 '모듈 번들러'의 차이에 대해서 먼저 살펴보면!
 
모듈

결합하는 일반적인 개념 및 프로세스.

여러 코드와 프로그램을 묶어 웹 애플리케이션을 사용자에게 제공. 결합하는 일반적인 개념 및 프로세스. 파일 결합의 최종 결과. 수동으로 파일 결합(여러 JavaScript 파일을 하나의 파일로 수동으로 연결)
 
모듈 번들러

번들링 프로세스를 수행하는 특정 도구 또는 소프트웨어

모듈 번들러는 번들링 프로세스를 자동화하는 도구. 여러 모듈과 해당 종속성을 가져와 하나의 번들 또는 여러 번들로 결합. 모듈 번들러는 프로젝트의 종속성 그래프를 분석하고, 이러한 종속성을 관리하고, 번들 파일을 출력하는 것. 필요한 모든 모듈이 올바른 순서로 포함되고 성능이 최적화되도록 보장.  아래는 많이 쓰이는 모듈 번들러

• Webpack : 풍부한 플러그인 생태계를 갖춘 고도로 구성 가능한 도구
• Parcel : ES6 모듈에 중점을 두고 더 작은 번들을 생성
• Rollup : 사용 및 설정이 쉬운 제로 구성 번들러

 

4. Webpack을 사용할 경우

번들러가 종속성 그래프 생성을 시작하는 시작점. 예를 들어 Webpack 구성에서는 다음과 같이 진입점을 정의.

module.exports = {
  entry: './src/index.js',
  // other configurations
};

 

5. 정리해보자면

번들링은 웹 애플리케이션을 최적화하고 관리하는 데 중요한 방법. 자산을 몇 개의 번들로 결합하면 로드 시간이 향상되고 종속성을 더 쉽게 관리 가능. 코드 분할 및 트리 쉐이킹과 같은 개념과 함께 Webpack, Rollup 또는 Parcel과 같은 도구를 이해하고 활용하면 개발 워크플로우와 애플리케이션 성능을 크게 향상 가능!

 

🐣 정리 : 번들(bundle) · 번들링(bundling) · 모듈(module)

---

번들(bundle) 

번들은 여러 리소스(예: JavaScript, CSS 및 이미지)를 웹 브라우저에 대해 보다 관리하기 쉽고 최적화된 형식으로 결합하는 단일 파일 또는 파일 세트. 로딩 시간을 개선하고 웹 애플리케이션의 자산을 구성하는 데 도움.
 

번들링(bundling) 

번들링은 다양한 리소스들을 하나 이상의 번들로 결합하는 프로세스. 이렇게 하면 HTTP 요청 수를 줄이고 종속성을 효율적으로 관리하며 브라우저에 대한 리소스 전달을 최적화.
 

모듈(module) 

모듈은 코드베이스의 개별 기능 단위로, 종종 자체 파일에 캡슐화. 모듈은 특정 기능, 개체 또는 값을 내보낼 수 있으며 필요에 따라 다른 모듈에서 가져올 수 있음. 이 모듈식 접근 방식은 코드를 구성하고 재사용을 촉진하며 종속성을 효과적으로 관리하는 데 도움. 예로는 ES6 모듈(import 및 export 사용) 및 CommonJS 모듈(require 사용)이 있음.
 

모듈 번들러(module bundler) 

번들링 프로세스를 수행하는 특정 도구 또는 소프트웨어. 프로젝트의 종속성 그래프를 분석하고, 이러한 종속성을 관리하고, 번들 파일을 출력하는 것. 필요한 모든 모듈이 올바른 순서로 포함되고 성능이 최적화되도록 보장. 웹팩(Webpack) 
 

---

 

번들/번들링/모듈/모듈번들러

 

 

출처:
https://parodev.tistory.com/58
https://strap.tistory.com/entry/번들이란-bundle
https://humanwater.tistory.com/2
https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%93%88