프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식입니다.
모듈은 서로 의존성을 띄고 있기 때문에 다음과 같은 문제들이 발생합니다. 🤔
- 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)
- 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
- ES6+ 스펙의 코드를 어떻게 처리할 것인가?
위 문제들을 해결하기 위해 등장한 것이 바로 모듈 번들러입니다!
모듈 번들러
모듈 번들러의 뜻부터 알아볼까요?
Module(분리된 코드 조각) + Bundler(묶는다)
모듈 번들러는 분리된 코드 조각들을 하나로 병합하는 개발 도구입니다.
핵심 작업은 JS 파일, CSS 파일 등 여러 리소스를 하나로 결합하여 단일 파일을 만드는 것입니다.
따라서 크롬과 같은 브라우저는 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게 됩니다.
사용 이유
- 한 번의 요청으로 파일을 받아올 수 있기 때문에
로딩 속도에서의 이점이 있습니다. - JS 압축, CSS 전처리기 변환과 같은 작업 등을
자동화해줍니다.
모듈 번들러는 Webpack, Rollup처럼 다양한 도구가 존재하며
우리는 그 중 최신 프론트엔드에서 가장 많이 사용되는 Webpack에 대해서 알아보도록 하겠습니다.
Webpack
Webpack은 Entry 포인트를 시작으로, 의존적인 모듈을 전부 찾아내서 하나의 파일로 번들링을 해줍니다.
기능
- CommonJS, AMD, ES6 Module 포맷을 모두 지원합니다.
- JS 뿐만 아니라 CSS, Image 등의 복잡한 의존성을 관리합니다.
- 성능 최적화
- 사용하지 않는 코드를 제거하는 Tree Shaking 같은 최적화를 수행합니다.
- HTTP 요청 수가 감소하여 네트워크 비용이 감소됩니다.
- Code Splitting
- 원하는 때에 모듈을 로딩할 수 있는 Dynamic Loading, Lazy Loading이 가능합니다.
장점
- 로딩에 대한 네트워크 비용이 감소됩니다.
- 모듈 단위로 개발이 가능하기 때문에 가독성이 높아지고 유지보수가 쉽습니다.
- 최신 JS 문법을 지원하지 않는 브라우저에서도 사용할 수 있습니다.
Webpack의 기능과 장점에 대해서 알아보았습니다.
지금부터는 Webpack의 동작 원리를 이해하기 위해 함께 쓰이는 Babel에 대해 배워보겠습니다.
Babel이란?
Babel은 최신 ES6+ 버전을 구버전인 ES5로 변환해주는 JS 트랜스파일러입니다.
Babel은 두 가지 역할을 수행합니다.
1. 트랜스파일러
- 기존 코드가
구표준을 준수하는 코드로변경됩니다.
2. 폴리필 (Polyfill)
- 브라우저가 지원하지 않는 코드를 지원 가능하도록 기존 함수의 동작 방식을 수정하거나 새롭게 구현합니다.
구현이 누락된 부분의 기능을 메꿔주는(fill in) 역할을 합니다.
Babel을 왜 사용해야 할까요?
ES5에서 JS는 모듈을 지원하지 않았습니다.
그렇다면 한 파일에 모든 코드를 다 넣어야 할까요..? 🤯
개발자들은 어떻게든 코드를 모듈화하고 서로 import하는 개념을 만들어냈습니다!
그렇게 등장한 두 가지 방법이 바로 CommonJS와 AMD입니다.
ES6에서는 위 두 방법의 특장점들을 가져와서 JS 내에서도 모듈을 지원하도록 하였습니다.
하지만 ES6 버전을 지원하지 않는 브라우저들이 있습니다.
따라서 모듈을 사용하기 위해서, 그리고 ES6 문법들을 사용하기 위해서 Babel을 이용하여
구버전으로 변환해주는 것이 필요한 것입니다.
Webpack vs Vite
그렇다면 Webpack은 대체 불가능한 완벽한 도구일까요?
변화가 매우 빠른 프론트엔드 업계에서는 이 기술이 최선일지 항상 의심하고 또 의심해야 합니다...
Vite란 이름의 뜻 그대로 "빠른" 자바스크립트 번들링 툴으로, esbuild 번들링을 통해 개발 환경에서 높은 속도를 자랑합니다.
Vite의 등장으로 CRA나 Webpack 대신 Vite를 사용하는 개발자들이 많아졌습니다.
Webpack과 Vite의 차이점
-
개발 서버
- Webpack: 소스 코드와 모든 종속 관계의 모듈을 번들링 한 후 서버가 준비됩니다.
- Vite:
esbuild로미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동됩니다. - dev-server ready time(보일러 플레이트 기준): Vite(1.8s) > Webpack(7.8s)
-
프로덕션 빌드
- Webpack: 각 모듈을
범위마다 함수로 맵핑하여 결합합니다. - Vite:
하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합합니다. 중복을 제거하기 때문에 가볍고 빠르게 빌드할 수 있습니다.
- Webpack: 각 모듈을
그렇다면 Webpack을 Vite로 교체해야 할까요?
Vite는 번들링 속도에서 강점이 있지만, 마이그레이션과 안정성 측면에서의 문제가 거론되고 있습니다.
Vite는 개발 환경에서 esbuild를 사용하지만 프로덕션 환경에서는 Rollup으로 번들링을 수행합니다.
따라서 Webpack에서 Vite로 마이그레이션을 한다면 Rollup config를 설정하는 것에 많은 시간을 투자해야합니다.
Rollup 설정에는 CommonJS 처리, Polyfill 처리 등이 되어있지 않기 때문에 일일이 플러그인을 설치해야해서 번거롭습니다. 하지만 설정을 마치게 되면 정작 프로덕션 환경에서는 Webpack과 빌드 시간에서 차이가 크게 나지 않는다고 합니다.
게다가 개발 환경과 프로덕션 환경의 설정이 다르기 때문에 빌드 안정성이 낮아서 개발 환경에서만 사용한다는 의견도 많습니다.
저 또한 프로덕션 환경에서는 안정성이 매우 중요하다고 생각하기 때문에
이미 Wepback으로 구성된 프로젝트라면 Webpack 플러그인 설정 등의 최적화를 통해 빌드 속도를 개선하는 것도 좋은 선택이 될 수 있다고 생각합니다.
글을 마치며
지금까지 모듈 번들러의 사용 이유와 대표적인 번들링 툴인 Webpack에 대해서 알아보았습니다.
그리고 최근 높은 번들링 속도로 주목을 받고 있는 Vite와 Webpack의 차이점에 대해서 알아보면서
Webpack을 교체하는 것이 필요한 지에 대해서 생각해보기도 했습니다.
환경과 목적에 맞는 번들링 도구를 선택할 수 있도록 이번 글이 도움이 되었으면 좋겠습니다.
이미지 출처
웹 개발 지식 쉽게 배우기 🤗
