토스ㅣSLASH 21 - JavaScript Bundle Diet
SLASH 토스 · YouTube
AI 핵심 요약
JavaScript 번들은 다운로드뿐 아니라 파싱과 컴파일 비용도 발생해, 크기가 커지면 페이지 로딩과 사용자 이탈에 영향을 줍니다. 발표자는 Webpack Bundle Analyzer로 용량이 큰 라이브러리와 중복 의존성을 찾아 대체·통합하고, Bundlephobia와 폴리필 점검으로 라이브러리 선택을 개선하는 방법을 소개했습니다. 라이브러리 제작 측면에서는 sideEffects 설정, 모듈별 출력, Babel의 pure annotation 등을 활용해 트리 셰이킹을 돕고, 큰 코드는 청크 분리와 동적 import·prefetch로 초기 로딩에서 분리했습니다. 토스에서는 이런 최적화로 번들 크기를 최대 3분의 1 수준으로 줄이고 초기 로딩 속도를 절반 가까이 개선했다고 설명했습니다.
- Webpack Bundle Analyzer로 번들 구성을 살펴보고, 직접 쓰지 않는 의존성이나 중복 버전을 먼저 찾으세요.
- 라이브러리를 고를 때는 Bundlephobia로 압축 후 크기와 의존성을 비교하고, 브라우저에서 불필요한 폴리필이 추가되는지도 확인하세요.
- 라이브러리 제작자는 sideEffects 설정과 모듈별 출력 구조를 고려해 트리 셰이킹이 가능하도록 구성해야 합니다.
- 큰 라이브러리는 공통 청크와 페이지별 청크로 분리하거나 동적 import와 prefetch를 활용해 초기 로딩 부담을 줄일 수 있습니다.
소개
웹사이트 기능이 많아짐에 따라 점점 커지는 JavaScript Bundle Size. 웹사이트 속도는 느려지고, 잠재 고객을 잃을 수도 있습니다. 라이브러리를 사용하는 그리고 제공하는 관점에서 Bundle Size가 커질 수 있는 상황과 해결 방법을 공유합니다. 이한 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 24 - Yarn Plugin으로 우아하게 자동 로깅하기
컨퍼런스 SLASH
수많은 사용자와 서비스로부터 만들어지는 로그, 어떻게 관리하면 좋을까요? Yarn을 활용하여 속도와 정확성, 개발자 경험까지 모두 잡은 방법을 소개합니다. 전성 / 토스 Frontend Platform Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #frontend #yarn #yarnplugin 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인...
프론트엔드 개발 도구
컨퍼런스 SLASH
토스ㅣSLASH 23 - 프로파일러로 시스템 성능 향상시키기
컨퍼런스 SLASH
서비스 운영 과정 속 여러 장애들, 어떻게 그 원인을 빠르고 정확하게 파악할 수 있을까요? 상황에 맞는 다양한 ‘프로파일러’로 문제 원인을 파악하고 또 해결한 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/42ypWpE 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #profiler #서비스성능 #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작...
백엔드 데브옵스 · 인프라 로드맵 2개에 담김
컨퍼런스 SLASH
토스ㅣSLASH 22 - 예고편
컨퍼런스 SLASH
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
컨퍼런스 SLASH
실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다. 진유림 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드
컨퍼런스 SLASH
거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다. 조유성 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
컨퍼런스 SLASH
토스ㅣSLASH 21 - 결제 시스템의 SDK와 API 디자인
컨퍼런스 SLASH
PG 연동 개발자들에게 쉽고 빠른 가이드 제공을 위해, 20년 동안 유지된 기존 시스템에 추상화 레이어를 만들고 SDK와 API를 설계했던 경험을 공유합니다. 추가로 인터페이스의 일관성과 예측 가능성 그리고 TypeScript와 npm 모듈 지원을 위한 시도들까지, 토스페이먼츠 오픈 API의 첫 여정에 대해 공유합니다. 이홍채 / 토스페이먼츠 Technical Product Owner 이현섭 / 토스페이먼츠 Frontend Developer 박순영 / 토스페이먼츠 Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im *영상 15분 10초 발표 장표 중 'code(2번째)'를 'message'로 정정하오니 참고해주십시오. #토스 #개발자컨퍼런스 #SLASH
프론트엔드 백엔드 개발 도구