목록번들사이즈줄이기 (1)

FE PARADISE

Next.js 페이지 성능 개선 - svg sprites 적용하기

기존에 내가 svg를 프로젝트 내에서 관리하던 방식은 다음과 같다.  우선 프로젝트 내에서 나는 styled-components를 이용하여 스타일링을 적용하고 있었다.각각 페이지나 큰 규모의 컴포넌트에 해당하는 스타일링 파일을 생성하고 모두 프로젝트 루트 밑에 styles/components 폴더 내에 페이지 이름.js 라는 파일을 생성하여 관리했다.  styles/componets |_ home.js |_ search.js |_ user.js 각각 스타일링 파일의 하단에 svg를 다음과 같이 정의해두었다.svg별로 이름을 지어주고 export하여 필요한 컴포넌트에서 import하는 방식을 사용 중이었다.  그중 path 길이가 엄청 긴 svg들도 있었다. 스타일링 파일을 불러올 때..
프론트엔드/Next.js 2024. 3. 22. 22:30
이전 Prev 1 Next 다음