Preformace Optimization

[kisstest]

이전 최적화 코드는 모든 항목을 별개의 파일로 나눠서 파일 요청이 그만큼 많아지게 되어 성능 저하의 요인이 됨

수정필요한 사항

• [ ] 초기 화면 렌더링시 사용자의 액션이나 상황에 따라 필요한 컴포넌트 import
  • 당장 필요하지 않는 css, js파일이 import되는 것 방지

code splinting

단일 파일들과 하나로 번들링 되어야 하는 파일등 상황에 맞는 최적화 필요

• 요청 파일 수 최소화
• 페이지 구성에 필수적인 컴포넌트만 추가(element-ui)
• css파일을 필요한 컴포넌트만 따로 분리하여 뷰파일 내부에서 lasy load할 경우 첫 로딩이 빨라지기는 하지만 필요한 element-ui컴포넌트가 모두 분리되어 다운되어 사이트 테스트에서 LCP의 성능이 다운되어 나타남
• webpack설정을 조정하여 css파일을 하나로 합칠 필요
• LCP
• 사용자의 인터렉티브가 필요한 요소는 해당 이벤트 후 동적 로딩

remove unused css

• purgecss
• element ui의 스타일이 적용되지 않음, 로컬에서는 제대로 작동
  • defaultExtractor의 문제로 보임

[kisstest]

@gumpcha master와 dev의 성능을 비교하기위해 good-reads-clone의 url을 변경했습니다 good-reads-clone-master good-reads-clone-dev