Web App 성능 개선 참고

빠른 로드 시간

• 사이트 성능을 높이기 위한 기술에 대해 종합적으로 정리

Detached window memory leaks

• window.open 또는 iframe 사용시 close 하더라도 window or iframe 객체참조 없애지 않으면 큰 메모리낭비
• WeakRef 를 사용하는 방법

Improving React App Performance

• react 렌더 안에서 inline function 사용 안 하기
• redux state 업데이트 하기 전에 변경이 있는지 비교하고 업데이트 하기
• 조건부 렌더링 하기
• API 호출은 Sequential 하게 하지 말고 Promise.all 을 사용하기

requestIdleCallback으로 초기 렌더링 시간 단축

• lazy loading 을 requestIdleCallback 을 사용해서 해라 - 메인 스레드가 비어있을때 호출됨.

JavaScript SDK 성능개선 방법

• Tree shaking 개선
• 자원 외부화로 번들 사이즈 감소 : url-loader -> file-loader 로 변경
• 필요 없는 모듈 제외
• Dynamic Import와 모듈 chunk, Promise.all 조합

Analyzing app performance

• JS 번들 로드 성능 분석, 측정
• __webpack_require__ 가 차지하는 비용
• 번역 : https://devjin-blog.com/notion-performance-enhancement/

Preload and Prefetch

• 리소스 우선순위 - preload, preconnect, prefetch
• 개츠비 프리로딩과 프리패치
• Best-ish Practices for Dynamically Prefetching & Prerendering Pages with JavaScript

The cost of JavaScript in 2019

Optimising Core Web Vitals on SPAs

구글 I/O 페이지 로드 후 성능

Javascript 초기로드 최적화

Webpack Tree Shaking

Webpack Complete Guide 2020

commonJS & treeShaking

React 조건부 Lazy Loading

When to useMemo and useCallback

LCP(Largest Contentful Paint) 최적화하기