[온라인 쇼핑몰 속도 최적화] JavaScript 번들에서 중복 모듈 제거

 

목차

 

💡 JavaScript 번들의 중복 모듈은 페이지 성능에 어떤 영향을 줍니까?

💡 이 감사를 수정하는 방법은 무엇입니까?

 

---

 

 

JavaScript 번들은 웹 페이지가 여러 기능을 가지고 있고 각 기능에 해당하는 JavaScript 코드가 따로 있다면, 이 코드들을 하나의 큰 그룹으로 묶어서 번들이라고 부릅니다. 이렇게 번들링된 JavaScript 파일은 웹 페이지가 로딩될 때 모두 함께 다운로드되고 실행됩니다.
대부분의 웹 페이지에서 JavaScript 번들은 일반적으로 인기있는 라이브러리, 의존성 및 패키지에서 코드를 가져와서 구성됩니다. 이로 인해 종종 여러 출처에서 중복 모듈을 상속받을 수 있습니다.

JavaScript 번들에서 중복 모듈을 제거하면 방문자에게 불필요한 JavaScript 코드를 전송하지 않게 되며, 이는 전달되는 JavaScript 페이로드를 낮추어 페이지를 로드할 때 브라우저 실행 과정을 빠르게 만들어줍니다.

 

---

 

💡 JavaScript 번들의 중복 모듈은 페이지 성능에 어떤 영향을 줍니까?

 

동일한 모듈이 JavaScript 번들에서 다음과 같은 방법으로 발생할 수 있습니다.

● 동일한 패키지의 동일한 코드
동일한 패키지의 다른 파일에서 동일한 코드가 있는 경우, 예를 들어, 하나의 패키지에서 여러 파일이 같은 함수 또는 변수를 정의하는 경우 발생합니다. 이 경우, 동일한 코드가 여러 번 번들에 포함되어 번들 크기가 커지고 브라우저가 중복 코드를 처리해야 합니다.
예시: 패키지 "math-utils"의 여러 파일에서 같은 "add" 함수를 정의하는 경우

● 유사한 패키지의 유사한 코드
다른 패키지가 JavaScript 기능이 유사하여 유사한 코드를 가지는 경우 발생합니다. 이는 패키지 간의 유사성 때문에 중복 코드가 발생하게 됩니다.
예시: "date-utils"와 "time-utils" 패키지가 각각 유사한 날짜 및 시간 관련 함수를 가지고 있는 경우

● 다른 패키지의 동일한 코드
서로 다른 패키지의 파일에 동일한 코드가 있는 경우 발생합니다. 이는 여러 패키지에서 동일한 라이브러리 또는 기능을 사용하는 경우에 발생할 수 있습니다.
예시: "charting-library"와 "reporting-tool" 패키지가 각각 다운로드한 "chart-utils" 라이브러리의 동일한 파일을 사용하는 경우

 

위의 모든 시나리오에서는 방문자가 페이지를 로드하는 속도를 늦추는 데 필요 이상으로 더 많은 JavaScript 코드를 다운로드해야 합니다.

< 중복된 JavaScript는 Javascript 페이로드의 총 크기를 증가시키며, 브라우저가 불필요한 코드를 다운로드, 구문 분석 및 실행해야 합니다. >

 

 

이러한 중복 모듈을 최소화하고 번들 크기를 줄이는 것이 웹 페이지의 성능 최적화에 도움이 됩니다. 중복 코드를 제거하고 필요한 모듈만 로드하도록 최적화된 번들링을 구현하는 것이 중요합니다.

 

 

---

 

💡 이 감사를 수정하는 방법은 무엇입니까?

일반적으로, 개발 워크플로에 좋은 사이트 구축 관행을 통합하여 JavaScript 모듈의 중복을 피하도록하십시오.

 

JavaScript 번들의 중복 모듈을 제거하는 방법은 다음과 같습니다.

 

1. Webpack 또는 Rollup과 같은 번들러 사용

주로 사용되는 JavaScript 번들러인 Webpack 또는 Rollup을 사용하면 중복 모듈을 처리할 수 있습니다. 이러한 번들러는 코드 분석을 통해 중복된 모듈을 식별하고 번들에 중복 포함되지 않도록 최적화합니다.

 

2. 트리 쉐이킹 (Tree Shaking)
트리 쉐이킹은 사용되지 않는 코드를 제거하는 기술로, 번들 내의 중복 모듈을 제거하는 데 도움이 됩니다. 주로 ES6 모듈 시스템과 함께 사용되며, 사용되지 않는 함수 또는 변수를 식별하고 번들에서 제거합니다.

 

3. 코드 스플리팅 (Code Splitting)
코드 스플리팅은 웹 애플리케이션의 코드를 여러 번들로 분할하는 기술입니다. 중복 모듈은 각 번들 간에 공유되므로 중복으로 번들되지 않습니다.

 

4. 사용 중인 패키지 업데이트
종종 패키지 버전 업데이트를 통해 중복 모듈 문제를 해결할 수 있습니다. 패키지 업데이트는 종속성을 최신 버전으로 유지하고 중복 코드를 줄이는 데 도움이 됩니다.

 

5. 직접 모듈 관리
경우에 따라 직접 모듈을 관리하여 중복을 방지할 수 있습니다. 프로젝트 내에서 중복 모듈을 찾고, 중복 모듈을 하나의 공통 모듈로 추출하여 사용하는 방법을 고려할 수 있습니다.

중복 모듈을 효과적으로 제거하면 번들 크기를 줄이고 웹 페이지의 성능을 개선할 수 있습니다. 대부분의 번들러 및 최적화 도구는 이러한 중복 모듈 문제를 자동으로 처리하므로 개발자는 일반적으로 번들링 설정과 코드 최적화를 통해 이러한 문제를 해결할 수 있습니다.

JavaScript 번들의 중복 모듈을 제거를 해결하기 위해 webpack-stats-duplicates와 같은 도구를 사용하여 중복 모듈을 식별하십시오. 여기에서 JavaScript 번들에서 중복 모듈을 제거하는 방법에 대해 자세히 알아보십시오.