최신 웹 애플리케이션을 위한 번들
최신 웹 애플리케이션에서는 번들 도구를 사용하여 최적화되고 축소되며 사용자가 더 빠르게 다운로드할 수 있는 파일 (스크립트, 스타일시트 등)의 프로덕션 '번들'을 만드는 경우가 많습니다. webpack을 사용한 웹 성능 최적화에서는 webpack을 사용하여 사이트 리소스를 효과적으로 최적화하는 방법을 알아봅니다. 이렇게 하면 사용자가 더 빠르게 사이트를 로드하고 상호작용할 수 있습니다.
![Webpack 로고](https://web.developers.google.cn/static/articles/webpack/image/webpack-logo.png?authuser=19&hl=ko)
webpack은 오늘날 가장 많이 사용되는 번들 도구 중 하나입니다. 최신 코드를 최적화하는 기능을 활용하여 중요한 부분과 중요하지 않은 부분으로 스크립트를 코드 분할하고 사용되지 않는 코드를 제거 (몇 가지 최적화만 포함)하면 앱의 네트워크와 처리 비용을 최소화할 수 있습니다.
![자바스크립트 최적화 적용 전후 상호작용까지의 시간이 개선됨](https://web.developers.google.cn/static/articles/webpack/image/before-after-applying-ja-4050ad9acad04.png?authuser=19&hl=ko)
Susie Lu의 Bundle Buddy의 코드 분할에서 영감을 얻었습니다.
먼저 최신 앱에서 비용이 가장 많이 드는 리소스 중 하나인 JavaScript를 최적화하는 방법을 살펴보겠습니다.