Improve compile performance for ssr

[dominikg]

Describe the problem

Components are compiled twice for ssr.

1. with generate: "ssr" for the serverside render
2. with generate: "dom" for the clientside bundle

The current implementation runs preprocess for each step separately ​which is wastful, especially for more demanding preprocessors like postcss or mdsvex.

Also components that are never compiled for ssr still get compiled with hydratable: true. Even though they are clientside only.

Describe the proposed solution

To avoid duplicate preprocessing, compile both variants in parallel during transform with ssr: true and cache + reuse the compiled dom variant in subsequent transform with ssr: false

Only set hydratable: true in this parallel compilation, components that are only transformed with ssr: false can be compiled with hydratable: false to reduce output size.

Possible issue:
the special svelte/ssr resolve mechanism could break the dom output if it was compiled during the transform with ssr: true

If that is indeed the case, the preprocess result could be cached instead and used as an indicator that the client variant needs to be compiled with hydratable: true

Alternatives considered

stick with the current implementation. This plugin has had issues with aggressive caching for ssr before and caching was completely removed to avoid it.

Importance

nice to have

[dominikg]

Addendum: Sveltekit allows to disable ssr for individual pages or in general https://kit.svelte.dev/docs#ssr-and-javascript

Should vite-plugin-svelte try to read kit config too( svelteconfig.kit namespace ) or should kit be responsible to setup the plugin accordingly?

And how should it handle pages with deactivated ssr?

<script context="module">
	export const ssr = false;
</script>

[dominikg]

After talking about this with @rixo i realized that it would be very hard to implement within vite-plugin-svelte, so instead of trying to be smart about it a new experimental option to allow dynamic modification of compileOptions is going to be added, see #122

	dynamicCompileOptions?: (data: {
		filename: string; 
		code: string; /* preprocessed code */
		compileOptions: Partial<CompileOptions>; /* compileOptions to be used for compile*/
	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void; /* return partial with wanted modifications or void to use unmodified */

kit could use this to identify components that are never serverside rendered and set hydratable return {hydratable: false}

[benmccann]

I don't quite understand everything posted above, but if we only have SSR or only have CSR then hopefully we're only compiling the components once. If we have both, then caching the preprocessing step sounds useful.

[dominikg]

As discussed in sveltejs/kit#2024 , the hydrate option in kit is not only relevant for ssr, so i'm not sure parallel compilation is a good idea or even possible, as it seems like kit is building the client first and passing the clients manifest to server build.

So as far as compilation is concerned there's not much vite-plugin-svelte can do. For preprocessing, it could cache the result, but it would require either a cache instance to be passed in or using a shared instance of vite-plugin-svelte in https://github.com/sveltejs/kit/blob/master/packages/kit/src/core/build/index.js

[dominikg]

closing here after the changes mentioned above have been released in 1.0.0-next.15.
https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md#100-next15

If sveltekit or other frameworks need additional changes to be able to deliver optimal builds. Please start a new discussion/enhancement request.