Code Splitting (2) 썸네일형 리스트형 [번역] JS 번들 분할의 모든 것 원문 : https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758 The 100% correct way to split your chunks with Webpack Working out the best way to serve up files to your users can be a tricky business. There’s so many different scenarios, different… medium.com 해당 글의 주제 사용자와 사이트에게 가장 적합한 파일 분할 방법을 파악하기 파일 분할 방법 배우기(/w webpack4) 요즘 webpack4는 거의 사용하지 않으므로, 1번에 .. 리액트 성능 최적화 : Code Splitting(코드 스플리팅) 모든 최적화 방법중에 성능이 가장 좋다. TLDR 필수사항 React suspense 필요 - 비동기 상태와 렌더링 상태의 동기화 React.Lazy 사용 default export 필요 추가 최적화 + eager loading 사용 (good) ++ 웹팩 매직 키워드를 이용한 prefetch 사용 (best) 시각적 확인 : 네트워크 탭과 커버리지 탭 사용 크롬 incognito 모드를 사용하는 것이 좋음. 크롬 확장 프로그램을 다운받지 않기 때문 커버리지 탭 사용 방법 cmd + shift + p > show coverage 서스펜스 팁 Lazy Loading 먼저 다이나믹 임포트가 필요하다. // 다이나믹 임포트. const loadGlobe = () => import('../globe') 서스펜스.. 이전 1 다음
