브라우저 OTel 번들, 어떻게 줄일까? 트리 쉐이킹 & 지연 로딩!
OpenTelemetry를 브라우저에 적용 시 번들 사이즈 증가로 인한 성능 저하 문제가 발생함
트리 쉐이킹과 지연 로딩을 활용하여 번들 사이즈를 줄이고 LCP(Largest Contentful Paint)를 개선할 수 있음
개발자들은 OTel SDK의 최신 버전을 사용하고, 불필요한 Instrumentation을 제거하여 번들 사이즈를 최적화해야 함
트리 쉐이킹을 통한 번들 최적화
트리 쉐이킹은 사용하지 않는 코드를 제거하여 번들 사이즈를 줄이는 효과적인 방법이다. 구체적으로 ES Modules를 지원하는 OTel 패키지를 사용하여 필요한 모듈만 import하고, 불필요한 Instrumentation은 개별적으로 import하여 제거한다. 따라서, Webpack과 같은 번들러가 dead code를 효과적으로 제거하도록 sideEffects: false 설정을 활용하는 것이 중요하다.
지연 로딩을 활용한 초기 로딩 성능 개선
지연 로딩은 OTel 코드를 초기 페이지 로딩 이후에 로드하여 LCP를 개선하는 방법이다. 구체적으로 dynamic import() 함수를 사용하여 OTel 초기화 코드를 비동기적으로 로드한다. 반면, 지연 로딩은 초기 로딩 시 발생하는 일부 Telemetry 데이터 손실을 야기할 수 있으므로, 중요한 데이터는 초기에 로드하거나 버퍼링하는 전략을 고려해야 한다.
실제 적용 가이드 및 주의사항
OTel 패키지 버전 일치를 통해 중복된 코드를 방지하고, 최신 OTel SDK 버전을 사용하는 것이 중요하다. 따라서, 불필요한 기능은 비활성화하고, 사용하지 않는 Instrumentation은 제거하여 번들 사이즈를 최소화해야 한다. 결과적으로, 모니터링과 성능 사이의 균형을 유지하며, 사용자 경험을 개선할 수 있다.
