Smaller, faster, less legacy: Four years after last major release, Svelte 4 arrives

Smaller, faster, less legacy: Four years after last major release, Svelte 4 arrives

The Svelte team, led by Rich Harris, has released Svelte 4, with many refinements including a 75 percent reduction in the size of the core package and the number of dependencies reduced from 61 to 16.

Svelte is a reactive, component-based JavaScript/TypeScript framework that is well liked by developers – nearly 75 percent of those using it want to continue according to the latest StackOverflow survey, though its actual usage lags behind Next.js and Vue.js. Svelte is normally used alongside SvelteKit, a web framework which uses Svelte.

This is the first major Svelte release since version 3, released in April 2019. There is a focus on performance and developer experience. On the performance side, the size of the Svelte package has reduced from 10.6MB to 2.8MB which means “less waiting on npm install,” the introductory post states. The size is expected to drop by a further 50 percent once ESLint, a static code analyzer supported by Svelte, is released in a planned new version that will use EcmaScript modules. Currently ESLint support requires a Common JS build of Svelte to be included in the package.

The reduced number of dependencies in Svelte 4 are beneficial for security as well as performance, the team said, because of “less susceptibility to supply chain attacks.”

The IDE support for Svelte in Visual Studio Code is improved in this version, with auto-complete no longer adding references to internal code and instead showing the public API.

One of the key principles of Svelte is that it generates efficient code at build time, improving the performance and reducing the size of the production application. In Svelte 3 developers could output either CommonJS (CJS) code or EcmaScript modules (ESM), referring to the two different and incompatible standards for importing libraries in JavaScript. Svelte “no longer supports the CJS format for compiler output,” the docs state, which means that developers needing this will have to use an additional bundler.

In addition, migrating to Svelte 4 requires at least Node 16 and for those using TypeScript, TypeScript 5.

Although these are significant changes, the team presents Svelte 4 as “mainly about setting the ground for … future improvements by adopting modern tooling and dropping support for some legacy versions of various technologies.” In particular, the forthcoming Svelte 5 will be a rewrite, though “the changes are still baking and not quite ready to share yet.”

Why do devs like Svelte? “I find it so much easier to understand [than React] said one on Hacker News.. I don’t have to useState/useEffect/whatever, I just assign variables and the component re-renders the relevant parts whenever I assign a new value. Styling is “just” CSS … te end-user bundle is so much smaller … has a positive impact on page performance scores, SEO etc too.” Another referenced a “massive reduction” in boilerplate code.

What is the problem with Svelte? “The only problem I have with Svelte is that I can’t find a job,” said another dev. “Almost every job is React, React, React.”