[frontend] 번들링에 대해 알아보기

1. 성능 최적화 & 번들링

성능 최적화란?

• UI를 최적화하여 애플리케이션의 속도를 높이는 것을 의미합니다.
• 프론트엔드 관점에서는?
• ⇒ 웹 애플리케이션의 로딩 속도와 사용자 경험(UX)을 개선하기 위해 다양한 기술과 기법입니다.

번들(bundle)이란?

• 여러 파일을 하나로 결합하는 작업을 의미합니다.

• 위 사진은 이해를 돕기위한 예시입니다 : 초등학교 입학을 위한 제품 번들
• ⇒ 어떤 제품을 묶음으로 판매하는 것을 '번들링'한다고 합니다.

번들러(Bundler)

• 번들링을 수행하는 도구
• JavaScript, CSS, 이미지, 폰트 등 다양한 파일을 묶고 최적화하는 기능을 제공합니다.
• 주요 번들러 도구:
  • Webpack: 모듈 번들링의 표준으로 자리 잡은 도구
  • Vite

번들링(Bundling) = 빌드

• 번들러가 수행하는 작업 또는 과정을 의미합니다.
• 번들링은:
  • 여러 파일(import, export나 내부에 있는 모듈 등)을 하나의 파일(또는 여러 번들 파일)로 묶음
  • 코드 압축, 중복 제거, 사용하지 않는 코드(Tree Shaking) 제거합니다.
  • 브라우저 요청 최적화를 목표로 합니다.

2.굳이 번들링 왜 필요할까요? [번들링 장점]

💡네트워크 요청 수 감소

⇒ 번들링: 여러 파일을 하나로 묶어 요청 수를 줄이고, 초기 로딩 속도를 개선시킵니다.

• 브라우저는 웹 페이지 로드 시 HTML, CSS, JS, 이미지 등 여러 파일을 서버에서 다운로드합니다
• 파일 개수가 많을수록 요청이 증가합니다.
• ⇒ 한번에 처리할 수 있는 요청 개수는 제한되어 있습니다. ⇒ 번들링 활용시 한 번만 요청해도 필요한 파일 전부 가져올 수 있습니다.

💡파일 크기 문제 해결

⇒ 번들 파일이 원본보다 작아지고, 실행 속도와 로딩 속도가 빨라지며 성능이 개선시킵니다.

• 코드 압축: 공백, 주석 제거 등을 통해 파일 크기 축소
• 사용하지 않는 코드 제거(Tree Shaking): 실제 사용되지 않는 코드를 자동으로 제거하여 파일 크기를 최소화

⇒ 성능 측면에서 이득이 부분만 있게됩니다.

💡파일 단위의 js 모듈 관리의 필요성 : 변수 충돌 방지

p) JavaScript에서는 전역 변수가 기본적으로 모든 파일에서 공유하게됩니다.

예를 들어, 프로젝트 폴더에 여러 개의 .js 파일이 있다고 가정

파일 A에서 const name = "Jisu";
파일 B에서도 const name = "Frontend";

이 경우, 전역 변수는 서로 겹칠 위험이 있음 예상하지 못한 값으로 덮어씌워질 수 있고, 에러가 발생할 가능성이 커지게됩니다.

 

s) Webpack의 역할: 모듈 번들링

• Webpack 같은 번들링 도구는 각 파일을 모듈 단위로 관리할 수 있게합니다.
• 각 파일의 변수나 함수가 자체적인 범위를 가지게 만들어, 다른 파일과 충돌하지 않도록 처리합니다

파일 A와 파일 B가 서로 충돌하지 않도록 Webpack이
파일마다 방에 넣고 잠가주는 역할을 수행!

⇒ Webpack

여러 .js 파일이 같은 프로젝트에 있어도 각 파일이 독립적으로 동작하도록 관리합니다.

변수 충돌 문제가 사라지고, 에러를 방지하게 됩니다.

그래서, 번들링이 필요한 이유는 무엇일까요?

• 변수 충돌을 막고, 파일 간 독립성을 보장합니다.
• 성능 최적화와 코드 관리의 용이성
• 단순히 파일을 묶는 것을 넘어서, 프로젝트의 안정성과 성능을 높이기 위해 필수적입니다.

3. 번들러(webpack과 vite)

webpack이란?

javascript 애플리케이션을 위한 모듈 번들러입니다.

웹팩에서 모듈이란?

웹팩에서 모듈은 단순히 JavaScript 코드뿐만 아니라,

웹 애플리케이션을 구성하는 모든 자원을 의미합니다.

• HTML 파일
• CSS 파일
• JavaScript 파일
• 이미지 (PNG, JPG, SVG 등)
• 폰트

이 모든 것이 웹팩에서 말하는 모듈

왜 모든 파일을 모듈로 취급할까요?

웹 애플리케이션은 여러 파일이 함께 동작하며 구성합니다.

하지만 이 파일들을 관리하려면 몇 가지 문제가 생길 수 있습니다.

• 파일 간의 의존성을 관리하기 어려움
• 자원을 효율적으로 로드하는 문제
• 코드 충돌이나 중복 선언 가능성

⇒웹팩은 모든 파일을 모듈로 취급해, 효율적인 관리와 최적화를 가능하게 합니다.

 

모듈 번들러?

HTML, CSS, Javascript 등을 각각의 모듈로 봅니다.

⇒ 하나의 묶음으로 번들링하는 도구

• 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링

 vite란?

최신 번들러로, ES Modules을 기반으로 설계되어 빠른 개발 환경을 제공

💡내 프로젝트 경험을 생각해보면! build 툴정할때

Vite로 개발하면 뭐가 좋아? 개발 서버 시작이 빠르데! 이래서 냅다 사용했던 경험이 있습니다.

왜 개발 서버 시작 시간이 빠르다는걸까??

• ES Modules(브라우저가 지원하는 표준)을 사용하여, 번들링 없이 개발 서버를 실행

기존 번들러(Webpack)의 방식

기존 번들러: 모든 걸 미리 챙겨 가기

여행 가기 전에, 여행 가방에 옷, 신발, 간식, 카메라 등 필요한 모든 걸 한 번에 다 넣고 출발
출발하기 전에 가방 싸는 데 오래 걸림, 속도 느림
뭐하나 찾으려면 가방을 열어 전체를 다 확인해야 함

• 개발 중에 프로젝트의 모든 파일(JS, CSS 등)을 하나로 묶어 브라우저에 전달합니다.
• 파일이 많으면, 번들링 과정에서 시간이 오래 걸리게됩니다.
• 파일을 수정할 때마다 전체를 다시 묶는 번들링이 실행되어 개발 속도가 느려질 수 있습니다.

Vite의 방식

🏃 Vite: 필요한 것만 바로 챙기기

여행 가방 없이 필요한 옷이나 간식만 즉시 빠르게 챙겨서 출발
준비 시간이 거의 없고 수정도 간단

• Vite는 번들링 없이 필요한 파일만 브라우저가 바로 가져가도록 합니다.
• 파일을 수정해도, 수정된 부분만 빠르게 반영 , 필요한 것만 빠르게, 효율적으로 전달!

그래서!! Vite를 통해 개발 단계에서의 성능 최적화 가능

Vite의 해결 방법:

• Vite는 번들링 없이 ES Modules를 활용해 필요한 파일만 브라우저에 전달→ 개발 서버 시작 속도가 매우 빠르게됩니다.
• 코드 수정 시, 변경된 부분만 브라우저에 즉시 반영.→ Hot Module Replacement(HMR)가 빠르고 효율적이게 됩니다.

결과:

• 개발자는 기다릴 시간이 줄어들고, 빠르게 작업 가능하게 됩니다.

 

 

참고자료

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#모듈-번들링이란

https://sung-98.tistory.com/93