프론트엔드 빌드 툴 webpack 부터 vite 까지

개발에서 손을 뗀 뒤로 웹팩이란 말을 들었을 때 도대체 저게 뭘까? 라는 궁금증이 들었지만 실제로 사용해본 적은 한번도 없었다.

우연히 IT기업에 다니는 초보개발자랑 잠깐 말을 섞을 일이 있었는데 회사 내에서도 웹팩을 많이 사용한다는 얘기를 들었는데 실제로 사용해 본적이 없으니 그냥 궁금 궁금.

 

그러다 구글의 노트북LM을 알게 되면서 유튜브나 웹에서 소스들을 싹 가져와서 분석을 맡겨보았다.

그리고 번들러라는 개념에 대해 어렴풋이 알 수 있었다.

 

이전에는 (내가) 웹사이트를 만든다고 했을 때 그냥 여기저기서 js 파일이며, css 파일들을 가져다 덕지덕지 붙여서 썼다.

그러다 보니 이게 실제로 필요한 건지 어디서 쓰고 있는건지 사실 잘 모를 때도 많았고, 시간이 좀 지나면 그냥 그러려니 하고 서버에 죄다 올라가기 일쑤였다.

 

그런에 이 번들러라는 것이 바로 그런 js나 css같은 파일들을 상호의존성 등을 파악해서 꼭 필요한 것들만 묶어준다는 것이고 그런만큼 로딩속도도 빠를 수 밖에 없다.

 

그리고 이제 웹팩에서 비트로 넘어가고 있다.

영상을 보면 그 차이를 알 수 있다.

 

https://youtu.be/Q7ToVF3UNJY?si=BFcwKhocllLEVF3h