이 페이지의 목적은 프로덕션 웹사이트의 성능 최적화 문제를 처리하는 방법에 대한 추가 조언을 제공하는 것입니다.

React에서 React.lazy}와 Suspense}를 사용하여 React 프로덕션 웹사이트에서 번들 청크를 분할하려고 시도한 것으로 보입니다. 그러나 이로 인해 웹 성능 점수가 예상대로 향상되지는 않았습니다.

그런데 왜 그럴까요?

제작 웹사이트에 추가 기능이 필요했다면.....

최근 제작 웹사이트의 성능을 향상시키는 임무를 맡았습니다. 처음에는 각 경로를 좀 더 느리게 로드해야 한다고 생각했지만 곧 이 작업이 이미 수행되었음을 깨달았습니다.

저도 다음에 무슨 일이 일어날지 궁금해지기 시작했습니다.

webpack 번들 분석기 플러그인을 설치하고 이후 각 부분에 대한 분석을 시도했습니다. 이어 어떻게 하면 성능을 높일 수 있을지에 대한 제안도 많이 받았습니다.

Main.bundle.js
메인 번들 크기가 너무 커서 구문 분석 시간과 함께 다운로드 시간도 증가합니다.

main.bundle.js를 어떻게 깨뜨릴 수 있나요?
제 경우에는 메인 번들에 번역과 관련된 json이 많아서 메인 번들 크기가 1.5MB 증가했습니다.

main.js 번들에서 지연 가져오기를 사용하여 번역을 제거했습니다. 이는 40%의 성능 점수 최적화를 제공합니다. 하지만 등대 성능 점수가 25에서 35까지만 도달했기 때문에 아직 완료되지 않았습니다.

그런 다음 다른 잠재적인 대용량 파일을 살펴보기 시작했습니다.

그 중 하나는 moment js인데, 여기에는 우리 웹사이트에 사용하지 않은 수많은 로케일이 있습니다. Moment js를 경량 라이브러리로 교체하는 것은 이 문제를 해결하는 한 가지 방법이지만 그렇게 하면 더 많은 코드 수정이 필요하고 전체 웹 사이트를 테스트하는 작업량이 증가하게 됩니다. 이는 이전에 수행하지 않았던 작업으로 더 많은 오류가 발생할 수 있습니다. 그런 다음 바람직하지 않은 영역을 제거하는 방법을 알아내기로 결정했습니다. 다행스럽게도 webpack 플러그인은 이미 사용 가능했습니다. 해당 플러그인 [ContextReplacementPlugin]을 활용하여 moment.js 파일의 크기를 최소화할 수 있었습니다.

앞으로 더 많은 내용이 나올 예정이니 많은 관심 부탁드립니다... 감사합니다