유튜브 영상으로 보기

https://www.youtube.com/watch?v=nV9MoBnlew4

안녕하세요, 단테입니다.

스벨트3이 처음 출시된지 벌써 4년이라는 시간이 흘렀습니다.
오늘은 저와 함께 스벨트4의 변경점에 대해 알아보겠습니다.

svelte4 릴리즈

6월 22일 스벨트 4의 안정적인 버전이 릴리즈 되었습니다.

svelte3과 비교하면 다음과 같은 변경점이 있습니다.

성능

하이드레이션 코드 사이즈 경량화

하이드레이션 코드의 사이즈가 더 줄었습니다.
SvelteKit을 사용하는 개발자들은 .svelte-kit/output/client/_app/immutable/nodes 폴더에서 변경된 사이즈를 확인해볼 수 있습니다.
https://kit.svelte.dev 의 사이트의 정적 파일 사이즈들은 12.7% (126.3kB -> 110.2 kB)가량 경량화 되었다고 합니다.

dev Dependencies 경량화

svelte4를 사용하기 위한 스벨트의 패키지들의 사이즈가 무려 75% 가량 줄었습니다. (10.6MB -> 2.8MB

이렇게 패키지 사이즈가 줄어들면 npm install을 기다리는 시간이 획기적으로 줄어들 수 있고 이는 빌드 타임이 줄어든다는 의미입니다.

설치하는 패키지 갯수가 61개에서 16개로 줄어들었습니다.

개발자 경험 향상

기존에 타입스크립트 환경에서 사용할때 띠용하는 개발자 경험들이 있었는데 이런 부분들이 개선되었다고 합니다.

https://github.com/sveltejs/svelte/pull/8702 여기 PR을 보면 되는데 타입 정의가 개선되었습니다.

타입 정의를 IDE에서 참조될 수 있게 하려면 별도 타입 정의된 파일들을 script 태그 내에서 다음과 같이 임포트했어야 했습니다.

<h1 in:fade> 타입 참조를 위해 별도 타입 파일을 참조해야 하는 모습

이러한 부분이 단일 파일 임포트만으로도 지원이 가능하게 변경되었습니다.

사이트, 문서, 튜토리얼 개편

https://learn.svelte.dev/tutorial 에서 스벨트의 기본, 고급과정, 그리고 스벨트킷에 대해서도 배울 수 있습니다.

최소 node16, 웹팩5 사용 필요

svelte4를 사용하려면 최소 node16 버전을 사용해야 합니다. 이전 production 환경에서 개발하시던 분들이 이번 breaking changes들을 적용하기 위해서는 기존 개발 서버에서 사용중인 node 버전을 확인해보셔야 합니다.

Svelte 5

스벨트5에서는 컴파일러와 런타임을 재작성할 예정이라고 합니다.

스벨트4는 이러한 개선점을 위한 기반을 마련한 것이라고 하네요. 이번 스벨트4에서 많은 번들사이즈의 경량화가 적용되었는데 버전5에서는 버전4에서 보다 새로운 기능과 더욱 새로운 성능 개선을 가져올 것이라고 합니다.

Change log

스벨트 4에 대한 공식적인 변경 사항은 깃허브 CHANGELOG.md를 살펴보시기 바랍니다.