Are the CSS / JS of a Svelte component loaded once or loaded for each instance of the component ?

[MarArMar]

I have a component that could appear hundreds or thousands of times in a page, and he has his own nested components

• Is the CSS loaded once for all ? Or once for every instance ?
• Is the JS loaded once for all ? Or once for every instance ?

And do you know if in Svelte and Sveltekit both behaviors are the same ?

Thanks !

[brunnerh]

Unless you do some weird things (like manually inlining the code and serving that for each instance), both should only be loaded once.

[MarArMar]

Ok impressive ! And do you know how the JS state of the components are kept separate ? Just wondering

[MarArMar]

Oh I forgot : is this the same behavior with Sveltekit ? I should have specified in the question

[brunnerh]

It is the same with SvelteKit.

In Svelte 4, state is stored as local variables inside a function, if you look at the generated code for a simple component with a counter you will find this:

function instance($$self, $$props, $$invalidate) {
	let count = 0;
	const click_handler = () => $$invalidate(0, count++, count);
	return [count, click_handler];
}

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, instance, create_fragment, safe_not_equal, {});
	}
}

Each component creates a new instance of the component class (here App) which has its own internal state, created via the instance function.

(In Svelte 5 components themselves are functions rather than classes, but the principle is similar.)

[MarArMar]

Ok so this means the JS is loaded once & only instances are created in memory right ?

and the CSS is also loaded once ?

[brunnerh]

Yes on both, generally.

Though CSS has different modes, it can either be injected via the JS or compiled to a separate stylesheet that has to be included manually. The injection code checks whether it has been injected already. So unless you or your tooling include the sheet multiple times, it will only be loaded once.

Docs for css compiler option:

• 'injected' (formerly true), styles will be included in the JavaScript class and injected at runtime for the components actually rendered.
• 'external' (formerly false), the CSS will be returned in the css field of the compilation result. Most Svelte bundler plugins will set this to 'external' and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable .css files.
• 'none', styles are completely avoided and no CSS output is generated.

[MarArMar]

Thank you so much for your in-depth answers @brunnerh !!