Paul Krill
Editor at Large

Svelte 4 shrinks code footprint, compiled output

news
Jun 26, 20232 mins

Upgrade reduces Svelte package size by 75%, produces smaller and faster hydration code, and lays the groundwork for Svelte 5.

High-speed train tunnel / motion blur / speed / motion / forward progress / future / what's next
Credit: MLenny / Getty Images

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.

Paul Krill

Paul Krill is editor at large at InfoWorld. Paul has been covering computer technology as a news and feature reporter for more than 35 years, including 30 years at InfoWorld. He has specialized in coverage of software development tools and technologies since the 1990s, and he continues to lead InfoWorld’s news coverage of software development platforms including Java and .NET and programming languages including JavaScript, TypeScript, PHP, Python, Ruby, Rust, and Go. Long trusted as a reporter who prioritizes accuracy, integrity, and the best interests of readers, Paul is sought out by technology companies and industry organizations who want to reach InfoWorld’s audience of software developers and other information technology professionals. Paul has won a “Best Technology News Coverage” award from IDG.

More from this author