Webpack → Vite: 번들러 마이그레이션 이야기
Airbridge 대시보드의 번들러를 Webpack에서 Vite로 마이그레이션하며 경험한 이야기를 공유합니다.
engineering.ab180.co
대략 아래에 정리해 놓은 내용이긴한데, 자세한 내용은 링크 들어가서 확인해 보시길 바래요~
이런 적용기는 글을 다 읽어봐야 정확하게 알 수 있을 듯 ^^
간단하게 보실 분들은 아래 내용 참고하시구요~
--- 간단하게 정리해 본 내용 ---
Webapack
- 많이 사용되고 있다.
- 10년동안 개발, 관리되며 plugin,loader등 생태계 잘 갖춰짐
- Code Splitting이나 Tree Shaking등 잘 지원
- 모듈을 IIFE 방식으로 묶어주어 멀티 브라우저 지원
- 댜양한 Boilerplate에서 사용되어 자료가 많음
번들러 춘추전국 시대
- Native 바람
- 에버그린 브라우저가 아닌 브라우저들을 지원하지 않는 비율이 높아짐
- Native 영역에서 돌려 성능을 높이려는 시도
- Golang 기반 : esbuild
- Rust 기반 : SWC
- Vite : 빠르고 간결한 개발 경험에 초점을 맞춘 번들러
원래는 Vue를 위해 만들어졌으나, 지금은 React등
다른 프레임워크와 라이브러리도 지원
<참고>
Webpack => 모듈 번들링
- 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어 주는 것
- 하나의 자바스크립트 파일로 만들어 웹페이지 성능을 최적화 해준다.
에버그린 브라우저(Evergreen Browser)
- 브라우저가 사용자에게 재설치를 요구하지 않아도 자동적으로 업데이트 할 수 있는 브라우져
- chrome, firefox, whale, Edge
Boilerplate
- 개발자들에게 복잡하고, 불필요하고 복잡하고 도움이 안되는 일들을
하지 않도록 도와주는 작업
Code Splitting(코드 분할)
- 원래 싱글 페이지 애플리케이션(SPA)은 초기 실행시에 웹자원을 모두 다운 받는데,
코드 분할을 하게되면 초기에 모든 웹자원을 다운받지 않고, 필요한 시점에 다운 받아
성능상의 이점을 얻을 수 있다.
