Webpack Bundle
Webpack 을 사용하면 웹에서 사용하는 다양한 파일들을 모듈별로 다룰 수 있게 된다.
서로 참조 관계에 잇는 파일들을 모아서 하나의 파일로 묶는 것을 Bundle이라고 한다. Webpack은 Bundle 작업을 해주기 때문에 모듈 번들러라고도 불리운다.
제품을 묶음으로 판매하는 것 = ' 번들링' = '빌드'
사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램을 묶는 행위.
개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.
Bundle 하는 이유?
- 모든 모듈을 로드하기 위해 검색하는 시간이 단축
- 사용하지 않는 코드를 제거
- 파일의 크기를 줄여준다.
- 파일의 크기 문제 해결
- 파일을 압축 한다는 의미이기 때문에 원본 보다 크기가 작아지고 실행 속도, 로딩 속도가 빨라진다. = 성능 상승
- 애플리케이션 임의 조작 방지
- 보통 압축한 파일을 받아오면 압축 해제를 해야지만 파일을 수정할 수 있다. 번들링 된 웹 애플리케이션도 사용자가 임의로 조작할 수 없게 해준다. 원본 코드의 조작 위험성이 떨어진다.
- 파일 단위의 js 모듈 관리의 필요성
- JS에서 변수는 기본적으로 " 전역 범위 " 를 가지기 때문에 하나의 프로젝트 폴더에서 여러 개의 JS 파일이 잇더라도 서로 변수를 공유하게 된다. 근데 만약 변수를 중복 선언하거나 의도치 않은 값을 할당해 생기는 에러 번들링 도구인 Webpack 에서는 모듈 번들링을 해결할 수 있게 해준다.
Webpack
가장 많이 사용하는 번들링 도구. - JS 애플리케이션을 위한 모듈 번들러
Wepback 제공 기능
- 네트워크 비용 감소
- 각 자원을 일일이 서버에 요청해 얻어올 필요가 없다. ( 같은 타입의 자원을 요청해 요청과 응답을 주고 받음 )
- JS 문법 버전 호환성 지원
- loader를 사용해서 js ES6문법을 ES5로 변환해주는 babel-loader를 이용할 수 있다.
- development / production 모드 선택 가능.
- production 모드에서는 코드 난독화, 압축, 최적화 작업 등을 지원해준다.
성능 개선 -> 번들 최적화
* React Lazy와 Suspense 적용.
/*메인 프로젝트 성능 최적화 시도해보기 */