JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に

JavaScriptのUIフレームワーク「Svelte」の最新版となる「Svelte 4」が正式にリリースされました。

https://t.co/9qz0sDglCe

— Svelte 4 Ever (@SvelteSociety) June 22, 2023

Svelteは読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。Stack Overflowの調査では開発者の人気が急速に高まっていることでも注目されています。

Svelteの最大の特徴はコンパイラであるということです。UIフレームワークは、なんらかのライブラリをアプリケーションに同梱することが一般的ですが、Svelteではコードをコンパイルして、いわゆるバニラJavaScriptを生成する仕組みです。

仮想DOMを使わず、コンパイル時に状態が変化する箇所を特定し、その変更のためのJavaScriptを生成することで実行時の高速な状態変更を実現することも特徴とされています。

このSvelteを基に、ルーティングやサーバーサイドレンダリング、ビルドツールなどを加えてフルスタックなアプリケーションフレームワークとしたのが、昨年（2022年）12月にリリースされた「SvelteKit」です。

参考：Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応

ちなみに、Svelte/SvelteKitの作者であるRich Harris氏は現在、Next.jsの開発元として知られるVercelの社員となっています。

Svelteパッケージが10MBから3MBにまで縮小

Svelte 4は2019年にリリースされたSvelte 3以来、4年ぶりのメジャーバージョンアップとなります。

ただし今回はSvelte 5のリリースに向けた前段階としてのメンテナンスリリースだと説明されており、大きな機能追加や変更はありません。下記は「Announcing Svelte 4」からの引用です。

Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas. It sets the stage for the next generation of Svelte to be released as Svelte 5 - we think you’ll love it.

Svelte 4は主にメンテナンスリリースであり、要件としての最小バージョンの引き上げと特定の領域で設計を強化しました。これはSvelteの次世代としてリリースされるSvelte 5（きっと気に入ってもらえると思いますが）の準備段階としてのリリースです。

Svelte 4では、Svelteのパッケージ自身が非常に小さくなりました。具体的には、10.6MBだったものが2.8 MBにまで縮小したとのことです。

さらにこの2.8MBのうち多くの部分を構文チェックなどを行うESLintが占めており、現在ESLintはCommonJSベースからES Moduleベースへと全面的に書き換えられているところなので、この書き換え後のESLintが採用されれば、Svelteのパッケージはさらに約半分になるとのことです。

ただし前述の通り、Svelteはライブラリではなくコンパイラなので、Svelteのパッケージが小さくなることはアプリケーションのバンドルサイズが小さくなるのではなく、ビルド時などにSvelteをロードしてコンパイルを実行する際の時間が短くなる、という効果になります。

また、Webアプリケーションのイベントに紐付けられるコード（Hydration Code）もより小さく高速になっているとのことです。

このタイミングで「svelte.dev」の公式ドキュメントも刷新され、より読みやすいレイアウトになりました。Svelte 3からSvelte 4へのマイグレーションガイドも公開されています。