# Airbnb가 JavaScript 빌드를 빠르게 만든 방법

> Clean Markdown view of GeekNews topic #6681. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=6681](https://news.hada.io/topic?id=6681)
- GeekNews Markdown: [https://news.hada.io/topic/6681.md](https://news.hada.io/topic/6681.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-06-06T09:28:01+09:00
- Updated: 2022-06-06T09:28:01+09:00
- Original source: [medium.com](https://medium.com/airbnb-engineering/faster-javascript-builds-with-metro-cfc46d617a1f)
- Points: 12
- Comments: 0

## Topic Body

- Webpack 에서 Metro로 번들러를 변경  
→ 간단한 UI변경은 80% 빨라졌고 (~1분에서 11초로)  
→ 가장 느린 프로덕션 빌드도 55% 빨라짐 (30.5분에서 13.8분으로)  
→ 추가로 웹페이지 성능도 1% 정도 빨라짐  
- Metro는 React Native용 오픈소스 JavaScript 번들러  
→ Airbnb는 이제 더이상 RN을 쓰지 않지만, 웹에도 잘 맞는다고 믿음  
→ 번들링을 3단계로 구성 : Resolution, Transformation, Serialization   
- Metro 와 Webpack 의 주요 차이점   
  - 개발시에 요청할 때만 JS 번들 처리   
  - 멀티 레이어 캐쉬   
  - Serialization   
  - RN용이므로 약간의 작업은 필요   
     - Bundle Splitting  
     - Tree-shaking

## Comments



_No public comments on this page._