bundler에 대하여

Create react app으로도 프로젝트를 생성할 수 있는데

 

왜 별도로 번들러를 설정해서 사용할까?  

이게 궁금해져서 번들러에 대해 찾아봤습니다 

시간의 흐름대로 적어보겠습니다.

 

 

1. 브라우저는 원래 ECMAScript 5 이전의 자바스크립트에서는 모듈시스템을 지원하지않았음

    -> 여러 파일로 나뉘어진 모듈화된 자바스크립트 코드를 인식하지못했다

 

    -> 하나의 파일로 제작해야한다 

 

    -> 번들러를 통해 묶어줘야한다  

 

    -> 묶어주는김에 조금 최적화할 수 없을까? (성능 향상 : 코드 최적화 , 번들크기 최소화, 파일크기 줄임 등 아래에서 설명하겠습니다)

 

 

이렇듯 번들러로 묶어주는것이 필수였고 

-> 번들크기를 최소화하고 코드를 최적화 함으로써 cicd가 동작할때의 속도나 브라우저가 파일을 파싱할때 더욱 빠르게 만들었습니다.

 

 

 

 

2. 현재 ECMAScript 6 에서는 모듈화된 자바스크립트를 지원하는데 왜 아직 번들러를 사용하는가?

    -> 1. 여러개의 파일을 파싱하게되면 브라우저는 여러개의 파일을 다운로드 해야함
             - 네트워크요청이 증가 

    -> 2. 하나의 파일로만 작성해야했기에 사용된 번들러지만 최적화하는 노력들이 현재도 유의미함
            - 불필요한 부분제거 및 코드 최적화로 전송되는 번들크기를 줄여 네트워크 비용 감소

 

    -> 3. 브라우저의 호환성 문제로 ES6를 지원하지않을수있음 

 

    -> 4. 코드 스플리팅

            - 어플리케이션을 여러개의 chunk로 묶어서 관리 
            ex) 메인페이지에 접속한다면 메인페이지해당하는 코드들이 먼저로딩되고
                 다른 페이지나 기능이 필요한 시점에 해당 코드들이 동적으로 로딩됨  

 

 

페이지의 데이터가 커지고 사용자와의 상호작용이 많아지면서 SPA가 등장하게 되었고

React와 Angular와 같은 프론트엔드 라이브러리, 프레임워크의 등장으로 가상돔을 통해 Client Side Rendering이 널리 퍼졌습니다.

 

Client Side Rendering은 최초 접근시 브라우저가 번들을 다운로드 해야했기에 초기 랜더링이 느리다는 단점이 있었고 

이는 사용자 경험이나 SEO( search engine optimization ) 최적화가 필요합니다.

 

번들러에서는 이를위해 아래와 같은 기능을 수행합니다.

1. 불필요한 코드제거

2. 코드 최적화 

3. 코드스플리팅

4. 하나의 파일로 만들어 네트워크 요청 감소 

 

 

Creact React App을 사용하면 기본적인 구성으로 webpack 번들러를 구성해서 적용이됩니다.

초기에는 빠르게 프로젝트를 제작할수있지만 

호환성 때문에 따로 구성해야하는 경우도 있고

직접 번들러를 설정하면서 최적화를 세밀하게 진행할 수 있습니다.

다양한 프레임워크나 라이브러리를 사용할때 생기는 요구사항들을 직접번들러를 설정하여 해결할 수 있습니다. 

 

 

최근에는 webpack 말고도 다양한 번들러가 존재합니다. 

webpack과 vite를 비교해보자면 

 

webpack: 

1. 오래 사용해온 만큼 다양한 플러그인이 존재 

2. 확장가능성이 높음 -> 설정이 복잡할 수 있음

3. 기본적으로 babel 사용

    -> TS나 JSX에서  JS 로 변환하거나, 최신 ES 문법을 하위로 변환할때 사용

    -> NodeJS로 동작 

 

 

vite: 

1. 초기 설정이 간단

2. 코드스플리팅과 불필요한 코드제거를 통한 최적화를 적극적으로 사용하여 초기로딩속도 향상

3. 기본적으로 ESbuild 사용

    -> Go 언어로 동작 

 

요약 : 

자바스크립트언어를 변환하는 방식의 차이로 생기는 특성들임 

webapck의 babel은 싱글스레드인 nodeJS로 동작하기에 처리속도가 비교적 느리지만 

다양한 설정을 제공하고 이를 위한 조정이 복잡할수있다 

 

vite는 ESBuild를 사용하면서 별도의 설정이 필요없기때문에 초기 설정은 쉽지만 

다양한 설정면에서 아쉬움이 있다 하지만 멀티스레드로 동작하는 GO 언어를 사용하기에 비교적 처리속도가 빠르다.