프로젝트 진행 중에 svg icon 파일을 수십개 사용할 일이 있어서 사용하였는데
로딩 속도느려졌기에 개선할 방법이 없을까 찾아 보다 발견한 내용이다
얼마나 걸렸길래?
초기 로딩 속도가 7.6초가 나왔기에 next.js 특성상 초기 로딩 속도가 걸린다는걸 감안하더라도 뭔가 아이콘 파일만 추가했는데도 이렇게 나온걸 개선하고 싶어 찾아보다 발견한 SVG sprite 기법이다.
SVG sprite란?
svg 파일은 이미지를 나타내는 HTML 과 유사한 xml 태그로 js안에 이미지를 넣을 시 파싱과 컴파일 작업에서 소스코드 처리하는데 시간이 더 걸리게 한다. 그러므로 메모리와 성능에서 더욱 시간을 쓰게 되는데
이러한 svg 파일들을 하나의 파일안에 모아 놓는것이다.
적용방법
<symbol id="folder-add" viewBox="0 0 24 24">
<path d="M9.5,8l0,-2.5l10,0l0,13l-15,0l0,-10l4.5,0c0.276,0 0.5,-0.224 0.5,-0.5Z" style="fill:#e7ca62;fill-rule:nonzero;stroke:#000;stroke-width:1px;"/>
<path d="M15,12l0,4m-2,-2l4,0" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;"/>
</symbol>SVG 파일안에 <symbol> 태그안에 있는 id로 구분하여 해당 SVG 아이콘을 불러내면 되는 것이다.
function Icon(props: React.SVGProps<SVGSVGElement> & TIconProps) {
const { name, size = "100%", ...rest } = props;
const iconName = stockNameMap[name] || name;
return (
<svg width={size} height={size} {...rest} xmlns="http://www.w3.org/2000/svg">
<use href={`/icons/sprite.svg#${iconName}`} />
</svg>
);
}결론
초기 로딩 속도는 획기적으로 빠르진 않았지만 next의 특성상 캐싱 작업이 진행되기에 재로딩 없이 이미지를 불러올 수 있었고 네트워크 요청이 줄어들어 속도가 개선되었다.
