Lighthouse

4. 성능 측정, 최적화

성능 측정 크롬의 lighthouse를 활용해서 성능 측정을 했다. 매우 성능이 안 좋게 나왔다. Opportuity 탭을 살펴보니 js파일이 너무 커서 로딩이 오래 걸리는 것을 알 수 있었다. webpack-bundle-analyzer를 통해 번들 크기를 보니 번들이 1개이고 용량이 매우 컸다. 1. 로딩 성능 최적화 - 코드 스플릿 엑셀 에디터는 페이지가 1개이기 때문에 페이지 별로는 코드 스플릿을 할 수 없다. 따라서 컴포넌트별로 코드 스플릿을 했다. // 기존 import { Header } from '@/layout' // 변경 const Header = lazy(() => import('@/layout').then(({ Header }) => ({ default: Header, })) ) dy..