Svelte 4 shrinks code footprint, compiled output

More than four years after the arrival of Svelte 3, Svelte 4 is now available, offering smaller and faster code hydration for better performance.

Svelte 4 reduces the Svelte package size by nearly 75%, from 10.6MB to 2.8MB, translating to less waiting on npm install. This will be especially noticeable for users of the Svelte REPL, users with limited connectivity, and users loading the learn.svelte.dev interactive learning experience for the first time, the Svelte team said. Users of SvelteKit can see the shrinkage in compiled output by examining the .svelte-kit/output/client/_app/immutable/nodes folder.

Other improvements in Svelte 4 include a more consistent and intuitive authoring experience: |local now is the default for transactions to avoid animations blocking page transitions, preprocessors are easier to write, and a number of fixes make CSP (Content Security Policy) easier to use. Further, the number of dependencies in Svelte has been reduced from 61 to 16, resulting in faster downloads and less susceptibility to supply chain attacks. The number of dependencies in SvelteKit has been reduced slightly, as well.

Described as mainly a maintenance release, Svelte 4 has been updated to take advantage of improvements to Node.js and browser APIs. Svelte 4 sets the stage for the next generation of Svelte to be released as Svelte 5, the Svelte team said. Svelte 5 will be a rewrite of the compiler and runtime, offering performance improvements and major new features.

Svelte lets developers assemble web UIs using HTML, CSS, JavaScript, and the Svelte compiler. Most apps and libraries compatible with Svelte 3 should be compatible with Svelte 4, the Svelte team said.

Svelte can be installed locally via NPM:

npm create svelte@latest

Developers also can try out Svelte 4 on StackBlitz.