번들러(Bundler)

번들러(Bundler)

• import나 require로 불러온 다른 파일이나 모듈을 모두 합쳐서 하나의 파일 생성해줌
  • 최적화 과정에서 여러 개의 파일로 분리될 수도 있음
• 번들(Bundle)은 묶는다는 뜻으로, 파일을 묶듯이 연결
• Webpack, Parcel, browserify 등의 도구 사용
• React는 Webpack을 주로 사용
  
  • SVG와 CSS 파일도 불러와서 사용
  • 파일을 불러오는 것은 웹팩의 loader가 담당

* css-loader : CSS 파일을 불러올 수 있게 해줌
* file-loader : 웹 폰트나 미디어 파일 등을 불러올 수 있게 해줌
* babel-loader : 최신 자바스크립트 문법으로 작성된 코드를 ES5 문법으로 변환해 줌

 

번들러의 이점

• 네트워크 병목 현상 해결
  • 여러 파일을 최적화해서 하나로 묶기 때문에 주고 받는 파일의 크기를 줄일 수 있음
• 모듈 단위 코딩
  • 간편한 유지보수
• 다양한 서드 파티 기능 사용
  • 웹팩의 경우 다양한 로더를 통해 여러 파일과 기능 모듈을 불러오고 사용할 수 있음