What's New in Svelte 4: Performance Boosts and Streamlined Development

On the 22th of June, Svelte has announced its new major release.

Even if it is presented as "mainly about setting the ground for these future improvements", it also bring its share of improvements along with the rework of some of their showcase websites.

If you're more a listener than a reader, this release has also been recorded on Svelte Radio Live

Table of Content

• Performance Enhancements
• Improved Developer Experience
• Updated Websites
• Migration Guide
• What to Expect From Svelte 5

---

Performance Enhancements

📉 Drastic reduction of the Svelte package

For this release, Svelte sure has lost some weight!

The overall size of Svelte dropped from 10.6 MB to 2.8MB, almost a 75% size decrease.

As its dependencies dropped from 61 to 16, the additional packages needed to run Svelte also have been reduced, also reducing the number of dependencies of SvelteKit.

This reduction brings some nice side effects such as a faster REPL experience, a faster experience on the interactive website and a much faster execution of npm install (of whatever package manager you might be using).

As of this release, Svelte sure is now!

🚿 Improved Hydration

Along with this drop in the package size, Svelte also lighten the code it generates for hydration.

As an example, the code generated for the SvelteKit website has been reduced from 126.3 kB to 110.2 kB, almost 13%.

Improved Developer Experience

🎭 Transitions Scope

Transitions are now local by default.

This prevents them from being global by default and thus risking to interfere with others, resulting in a collision of your transitions during page load.

🧱 Web Components Authoring

Creating a Web Component in Svelte has been pretty easy:

<svelte:options tag="my-component" />

However it also has been limiting for more advanced cases such as controlling whether or not to reflect updated prop values back to the DOM, disabling the shadow DOM, etc.

Svelte 4 makes the authoring experience of Web Component way smoother by shifting its configuration into a dedicated customElement attribute of svelte:options.

This attribute takes a number of options that helps you configure your Web Component:

<svelte:options
  customElement={{
    tag: 'custom-element',
    shadow: 'none',
    props: {
      name: {
        <!-- 👇 Reflects the updated value back to the DOM -->
        reflect: true,
        <!-- 👇 Reflects the value as a number -->
        type: 'Number',
        <!-- 👇 Name of the attribute -->
        attribute: 'element-index'
      }
    }
  }}
/>

<script>
  export let elementIndex;
</script>

...

🛡️ Stricter Types

Stricter types are now enforced for createEventDispatcher, Action, ActionReturn and onMount:

• createEventDispatcher now looks for the correctness of the provided parameters regarding their type and number and throws the associated errors:

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{
  optional: number | null;
  required: string;
  noArgument: never;
}>();

// Svelte version 3:
dispatch('optional');
dispatch('required'); // Detail argument still omitted
dispatch('noArgument', 'surprise'); // Detail argument still provided

// Svelte version 4 using TypeScript strict mode:
dispatch('optional');
dispatch('required'); // Error, missing argument
dispatch('noArgument', 'surprise'); // Error, cannot pass an argument

• Action and ActionReturn now have a default parameter type of never if Action has no generic type provided:

const untyped: Action = (node, params) => {
  // Now an error as `params` is expected not to exist
}

const typed: Action<HTMLElement, string> = (node, params) => {
  // `params` is of type string
}

• onMount now requires its return a synchronous function as an asynchronous one might lead to bugs if the callback is expected to be called on destroy, since this is the case only for synchronous functions:

// ❌ `cleanup()` is not called due to the function being async
onMount(async () => {
  const bar = await foo();
  return cleanup();
});

// ✅ `cleanup()` will be called
onMount(() => {
  foo().then(bar => /* ... */ );
  return cleanup();
});

Updated Websites

📝 Tutorial Website

The tutorial has been reworked for a better user experience:

Former	Newer

The design still is the same: a side panel with text and instructions with a code editor on the right to do the exercise.

However, some neat things were improved such as seeing the file structure on the side, reducing the number of elements in the navbar and a better navigation between sections. It also feature a dark mode!

The tutorial now lives on https://learn.svelte.dev while the former is reachable at https://svelte.dev/tutorial/basics

📚 Svelte Website

The Svelte Website also had a rework:

Former	Newer

The pages have been split, mobile navigation has been improved, the TypeScript documentation has been enhanced and a dark mode has also been released.

As of now, the SvelteKit website has not yet been updated but a rework to offer a similar experience is currently ongoing.

Migration Guide

This release is shown as a step towards Svelte 5 and not a very impactful one.

In order to upgrade from Svelte 3 to Svelte 4, the team has updated their migration tool and it should not take much more than running the following command:

npx svelte-migrate@latest svelte-4

Please note that the minimum version requirements have been updated and you will need:

• NodeJS 16 or higher
• SvelteKit 1.20.4 or higher
• TypeScript 5 or higher

More details about the requirements are listed in the migration guide

What to Expect From Svelte 5

Almost no information about what is upcoming in Svelte 5 has been shared so far.

However, as Svelte is heavily tied to ESLint, so is its package size. With the current rewrite of ESLint, by the time Svelte 5 is released, its size might drop by over another 50%.

As Svelte is focused on developer experience and efficiency, the changes we will probably see a number of improvements in those areas, as stated in their blog post:

Svelte 5 will bring major new features and performance improvements to Svelte

---

I hope that you learn something useful there!

Pierre BouillonFollow

Software Engineer | Privacy Advocate | Coffee Lover

Comments

[Ting]

Been looking into svelte and solid, how does Svelte 4 compare to Solid with all these new improvements?

[Pierre Bouillon]

I wish I could answer you precisely, however si do not know SolidJS (nor Svelte but I’m working on it) enough to give you a proper feedback on this

I guess that the core features and performance are still the same (so far, before Svelte 5) but that at least the size of Svelte 4 is not a pain point anymore!

[Ting]

No worries, thank you for making the post! Maybe I will try them out and share my experience as a total noob :)

[Jyothikrishna]

Hello @ting 👋. Welcome to Dev community

[Ting]

Thanks!

[Dimitri Mostrey]

Thanks for the article. Svelte is on my radar. Upgrading my vast Laravel website to LiveWire and alpinejs. And Tailwind... A stepping stone towards an API. A lot to do but worth it. So I hope.

Maybe the SPA will be Svelte based. Alpinejs has a similar code structure. I'll wait for Svelte 5.

[Pierre Bouillon]

Thanks for reading and your feedback!

I also kept an eye on Svelte, to see if it can still prove relevant among the other giants of JS Frameworks

So far they are still proposing some interesting features and updates seems to stay relevant and in the same spirit

I hope that Svelte 5 will be as exciting as they are implying!

[artydev]

" 2.8MB" small ?

Look at this : VanJS

devtoVanJS

VanJSIfYouMissJSX

Here is a basic Counter , no bundling, directly in browser Counter

import van from "./van.js"
const {button, h1, div} = van.tags


//VanJS
// Create a new State object with init value 1
const counter = van.state(1)

let Counter = div (
  h1("VanJS Counter ", counter),
  button({onclick: () => counter.val++}, "INC")
)

van.add(document.body, Counter)

regards

[Thiago Lino Gomes]

2.8M is the size of the compiler, the javascript generated and sent to the browser in an app with a simple counter like the one in your example is 2.04KB
But with a much more convenient and scalable syntax
example

[Pierre Bouillon]

Their package is indeed smaller than it was, and I’m looking forward to Svelte 5 for an event smaller bundle

Still, there is of course tools that will be lighter for sure, be it VanJS, another tool or even raw HTML/JS

I guess that, as everything in tech, this is a matter of compromise and choosing the most suitable tool for your usage

However I didn’t knew about VanJS, glad to have learn something new, thanks for sharing!

[artydev]

You are welcome :-)

[Phyo Arkar Lwin]

Great one. Better than official svelte4 launch post. It was missing a lot of information.

[Phyo Arkar Lwin]

Thanks , the original svelte4 launch blockpost was lacking information .
This is a lot better.