module bundler

BirdsOnTree·2022년 11월 15일
0

Javascript

목록 보기
16/17
post-thumbnail

모듈?
프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위.
or
분리된 파일을 의미한다. JavaScript에서 현재 모듈을 다른 모듈에서 접근할 수 있도록 export 키워드를 사용하며, 분리된 모듈을 불러오기 위해 import 키워드를 사용한다.

Bundler

인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었다.

하지만 인터넷이 발달하면서, 적게는 수십만 줄에서 많게는 수백만 줄의 코드로 이루어진 대규모 웹 서비스들이 생겨나기 시작했다. 하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 하나 둘씩 문제가 발생하였다.

또한 파일의 요청이 많아질수록, 사이트의 사용자가 많을수록 응답을 제대로 못하는 네트워크 병목현상이 발생할수 있다.

파일들을 하나의 파일로 만들면 네트워크 병목현상을 피할 순 있겠지만, 체계적으로 개발이 힘들어지고 유지보수 또한 힘들게 된다. 그리고 변수 또는 함수 이름이 중복되는 경우, 모듈간 종속성 때문에 배포하기 전부터 많은 문제가 발생하게 된다.

모듈 간 종속성?
예) A.js 파일은 B.js를 import 하고 B.js 파일은 C.js 파일을 import 하고... 이렇게 모듈끼리 서로 종속되는 것을 의미
모듈 간 종속성이 복잡한 경우 어떤 모듈에서 문제가 발생했는지 추적하는것이 어렵다.

Bundler가 하는일?

그래서 번들러라는 얘는 js파일들을 하나의 js파일로, css파일들을 css파일로, png파일들을 png파일로 만들어 Chrome과 같은 브라우저에서는 하나의 단일 파일을 로드함으로써 어플리케이션이 동작하도록 해준다.

JS 빌드 과정

  1. 트랜스파일(Transpiling)
    프론트엔드에서 사용하는 JS 파일은 대부분 ES6나 JSX 등을 활용할 수 있는 최신 고급 문법을 사용하여 구성된다. 이러한 문법은 JS 의 다양한 기능을 활용할 수 있다는 장점이 있지만, 구형 브라우저들이 고급 JS 문법을 이해하지 못한다는 호환성 문제가 존재한다. 이 문제를 해결하기 위해 트랜스파일이라는 기법을 적용하게 되었습니다.
    트랜스파일은 하나의 프로그래밍 언어로 작성된 파일을 아예 다른 프로그래밍 언어가 아닌, 비슷한 수준의 언어로 변환하는 기법이다. JS 의 트랜스파일은 최신 버전의 JS 코드를 구형 버전의 JS 코드로 변환하기 위해 활용하고 있다.

  2. 번들링(Bundling)
    트랜스파일된 JS 코드를 통해 구형 브라우저에 대응할 수 있게 되었지만, 각각의 JS 파일을 사용하기 위해 파일을 불러오는 순서를 고려하면서 무수히 많은 스크립트 태그를 추가해야하는 등의 문제가 발생하게 되었다. 이 문제를 해결하기 위해 수많은 JS 파일과 모듈을 하나의 파일로 묶는 번들링 기법이 등장하게 되었다.

  3. 압축(Minifying)
    번들링 기법을 통해 하나의 JS 파일을 관리할 수 있게 된 것은 좋지만, 수많은 파일들을 하나의 파일에 담은 만큼 파일 용량이 커질 수 밖에 없었다. 이렇게 커진 파일 용량은 JS 파일을 브라우저 상으로 로드하는 시간이 늘어나는 문제로까지 이어지게 되었고, 이러한 문제는 번들 파일에 압축(Minifying) 기법을 적용하면서 자연스럽게 해결되었으며 파일 용량과 로드 시간을 최적화한 JS 빌드 파일을 생성할 수 있게 되었다.

과정 정리:
최신 버전의 JS 코드를 구현 버전의 JS 코드로 변환 >> 수많은 JS 파일과 모듈을 하나의 파일로 묶는 번들링 작업 > 압축을 통해 용량을 줄이고 로드 시간 줄여준다.

Bundler들

JS 파일을 번들링할 때 자주 사용되는 Webpack, Rollup, Parcel 가 있다.

  • Webpack
    오랫동안 사용되어 개발 레퍼런스가 다양해 가장 안정적인 번들러
    로더를 통해 JS 모듈과 JS 이외의 모듈들을 통합
    많은 서드파티를 필요로 하는 복잡한 애플리케이션에 주로 활용

  • Rollup
    ES6 모듈 형식으로 빌드 결과물을 생성할 수 있는 번들러
    진입점을 다르게 설정하여 번들링 가능
    최소한의 서드파티로 라이브러리를 만들기 위해 주로 활용

  • Parcel
    설정이 필요없는 번들러
    캐싱을 사용하여 빌드 속도가 빠름
    복잡한 설정을 피하고 간단한 애플리케이션을 빠르게 만들고 싶을 때 주로 활용

  • SWC
    Rust 로 구성된 최신 JS 트랜스파일러
    JS 트랜스파일링, 코드 압축 과정을 최적화하여, 우수한 성능을 보임

  • 많은 서드파티를 필요로 하는 복잡한 어플리케이션이라면 Webpack
  • 최소한의 서드파티로 라이브러리를 만들고 싶다면 Rollup
  • 복잡한 설정을 피하고 비교적 간단한 어플리케이션을 만들고 싶다면 Parcel

Webpack

가장 많이 사용하고 있는 Webpack에 대해 더 알아보았다.

webpack은 앱에 필요한 모든 모듈을 알아서 매핑해주며, 매핑된 결과를 가지고 하나 이상의 번들을 생성함.

장점

  • 모듈 단위 코딩
    모듈 단위의 코딩이 가능해진다. 모듈 단위 코딩을 하게 되면 각 모듈이 독립적인 공간임으로 앞서 문제가 되었던 중복된 이름으로 인해 예상치 못한 에러가 발생하는 것을 막을 수 있다.

  • ES6 버전 이상의 스크립트를 사용 가능
    webpack은 로더(babel-loader)를 통해바벨을 사용할 수 있다. 이를 통해 ES5만 지원하는 오래된 브라우저에서도 ES6 이상의 문법으로 이루어진 JS 파일을 작동할 수 있게 해준다.

  • SASS를 사용 가능
    webpack은 style-loader와 css-loader, sass-loader라는 로더를 사용하여 SASS를 CSS로 컴파일하여 사용할 수 있게 만들어준다.

  • 자주 사용 되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.

  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.

  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.

  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.

  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 - 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

추가적 내용

  • Webpack 의 광범위한 개발 레퍼런스를 활용할 수 있다.
  • Webpack 의 다양한 플러그인을 활용할 수 있다.
  • ESM 모듈에 대한 TreeShaking을 지원한다.
  • SWC 를 통해 JS 트랜스파일 및 압축 과정을 최적화 할 수 있다.
  • NextJS v12 부터 SWC 가 정식으로 도입된만큼, 장기적으로 Webpack 과 SWC 의 조합은 NextJS를 사용하는 프로젝트에서 최적의 조합이 될 수 있다.

출처:
[Hov log]
https://blog.leehov.in/24
[평범한 직장인의 공부 정리]
https://developer-talk.tistory.com/550
[ksung1889.log]
https://velog.io/@ksung1889/%EB%B2%88%EB%93%A4%EB%9F%ACbundler%EB%9E%80
[linewalks]
https://blog.linewalks.com/archives/8190

0개의 댓글