Svelte 4 Released: New Features for the JavaScript Framework

Svelte is a popular JavaScript framework that’s gained a loyal following in recent years. With the Svelte 4 release, a major version has finally been released after four years. While Svelte 4 is mainly announced as a maintenance release, it also paves the way to Svelte 5, the next generation for the framework.

Svelte 4 is finally released

After months of development, the stable release of Svelte 4 is finally available. The Svelte 3 release was already over four years ago, which is a considerable amount of time in the world of JavaScript frameworks. Since many important technologies, especially Node.js and browser APIs, have evolved over the past years, it is time for Svelte to catch up.

Svelte 4 changes at a glance

• Performance improvements: The new version results in smaller, faster hydration code, leading to a reduction in the size of the generated JavaScript code.
• Package size reduction: The Svelte package size has been reduced by almost 75%.
• Fewer dependencies: The number of dependencies in Svelte has been significantly reduced, which especially means less vulnerability to supply chain attacks.
• Improved Developer Experience: Svelte 4 provides a more intuitive and consistent developer experience, for example by making it easier to create preprocessors and easier to set up CSP.
• Updated website, documentation and tutorials: The official svelte.dev website has been revised and now includes several pages with improved mobile navigation and revised TypeScript documentation, among other things.
• Migration: Migration from Svelte 3 to Svelte 4 should be possible for most compatible apps and libraries. Tooling versions may need to be updated, such as Node.js 16.

Performance in Svelte 4

Svelte 4’s main focus is to improve the existing version and ensure the stability of the software. In Svelte 4, minimum requirements have been raised to ensure that Svelte keeps pace with the latest technological developments.

Specific design optimizations have also been made to further improve the user experience. However, the most exciting thing for developers may be the promised performance optimization, especially in the area of hydration.

For example, on kit.svelte.dev the JS generated across the whole site was reduced in size by 12.7% (126.3 kB to 110.2 kB).

Also noteworthy is the reduction of Svelte's package size by almost 75%. This translates into shorter installation times and less time when installing via npm.

Reduced dependencies in Svelte 4

The Svelte developers have continued to work on drastically reducing dependencies in Svelte. From 61 dependencies in the old version, only 16 are left in Svelte 4. This should enable faster downloads and also reduce the risk of security vulnerabilities due to supply chain attacks.

Improved Developer Experience

Developer experience has always been a focus for Svelte and has been further improved in Svelte 4. By changing the default setting for transitions and making it easier to write preprocessors, the user experience should be optimized.

Website, Documentation, and Tutorial

The release of Svelte 4 is accompanied with an update of the official Svelte website. The website has been restructured to provide users with improved mobile navigation. There is also newly revised TypeScript documentation and an extended REPL. The SvelteKit website was also updated to ensure a consistent user experience. The official Svelte tutorial has also received an update.

Migration from Svelte 3 to Svelte 4

According to the announcement, compatibility between Svelte 3 and Svelte 4 is largely preserved, so most apps and libraries should continue to work without major adjustments. Only tooling requirements may require updates. To facilitate the migration process, the tool "svelte-migrate" (npx svelte-migrate svelte-4) is available.

When is Svelte 5 coming?

Impatient developers are probably already looking towards Svelte 5, which doesn't have a release date yet. However, the Svelte 4 announcement already tells us the following about the next major version:

• Svelte compiler and runtime are being rewritten: We can assume this will be accompanied by fundamental improvements and optimizations that will further enhance Svelte's performance and functionality.
• Modern tooling and support for current technologies: Svelte 4 already lays the foundation for implementing modern tooling technologies. Support for older bundlers is discontinued.
• New features and performance improvements: Svelte 5 is expected to bring significant new features and performance improvements, although details are deliberately kept under wraps.

Svelte 5 will bring major new features and performance improvements to Svelte. The changes are still baking and not quite ready to share yet, but stay tuned!

Let’s stay curious about what awaits us in the distant future. Hopefully, we won't have to wait another four years for the release.

Conclusion

The release of Svelte 4 marks an important milestone in the development of the framework and gives a promising preview of what can be achieved with Svelte 5. What new possibilities the next generation of Svelte will bring and how it will inspire the developer community remains to be seen. But what’s already clear is that major changes are to be expected.

If you want to learn more about the changes in Svelte 4, you should take a look at the extensive changelog. The complete announcement is also worth reading.