Skip to content

feat: enable optimizer for server environments during dev #1185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
+86 −78
Draft

feat: enable optimizer for server environments during dev #1185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74c7c5c
feat: enable optimizer for server environments during dev
dominikg Jul 28, 2025
730c995
Update packages/vite-plugin-svelte/src/plugins/setup-optimizer.js
dominikg Jul 29, 2025
ff27973
Apply suggestions from code review
dominikg Jul 29, 2025
0cef83c
improve typing and fix default handling of consumer
dominikg Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/spotty-jokes-notice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/vite-plugin-svelte': minor
---

feat: enable optimizer for server environments during dev
13 changes: 13 additions & 0 deletions packages/vite-plugin-svelte/src/plugins/configure.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export function configure(api, inlineOptions) {
*/
let preOptions;

/**
* @type {import('vite').DepOptimizationConfig | undefined}
*/
let optimizeDeps = undefined;

/** @type {import('vite').Plugin} */
return {
name: 'vite-plugin-svelte:config',
Expand All @@ -59,9 +64,11 @@ export function configure(api, inlineOptions) {
// extra vite config
const extraViteConfig = await buildExtraViteConfig(preOptions, config);
log.debug('additional vite config', extraViteConfig, 'config');
optimizeDeps = extraViteConfig.optimizeDeps;
return extraViteConfig;
}
},

configResolved: {
order: 'pre',
handler(config) {
Expand All @@ -87,6 +94,12 @@ export function configure(api, inlineOptions) {
ensureConfigEnvironmentConditions(name, config, opts);
// @ts-expect-error the function above should make `resolve.conditions` non-nullable
config.resolve.conditions.push('svelte');
if (config.consumer === 'server' && optimizeDeps !== undefined) {
// optimizeDeps is not inherited by server environments so return it here
return {
optimizeDeps
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not entirely happy with this for 2 reasons

  1. this configuration part should probably be moved out of this plugin and into the setup-optimizer plugin, but that requires a bit of refactoring and maybe running vitefu twice.

  2. it replicates the same optimizeDeps for server and client env, but i am not sure yet if the same rules apply

Copy link
Member

@eltigerchino eltigerchino Jul 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it replicates the same optimizeDeps for server and client env, but i am not sure yet if the same rules apply

I was thinking the same thing. Would it be enough for us to just configure the extensions and plugins settings so that esbuild knows how to handle Svelte modules? Then, the user can decide what to include/exclude for optimizing themselves.

};
}
},

configureServer(server) {
Expand Down
146 changes: 68 additions & 78 deletions packages/vite-plugin-svelte/src/plugins/setup-optimizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ export function setupOptimizer(api) {
return {
name: 'vite-plugin-svelte:setup-optimizer',
apply: 'serve',
config() {
configEnvironment(name, config) {
// fall back to vite behavior when consumer isn't set
const consumer = (config.consumer ?? name === 'client') ? 'client' : 'server';
/** @type {import('vite').UserConfig['optimizeDeps']} */
const optimizeDeps = {
// Experimental Vite API to allow these extensions to be scanned and prebundled
Expand All @@ -43,43 +45,25 @@ export function setupOptimizer(api) {
// the added plugins are patched in configResolved below
if (rolldownVersion) {
//@ts-ignore rolldown types not finished

optimizeDeps.rollupOptions = {
plugins: [
placeholderRolldownOptimizerPlugin(optimizeSveltePluginName),
placeholderRolldownOptimizerPlugin(optimizeSvelteModulePluginName)
rolldownOptimizerPlugin(api, consumer, true),
rolldownOptimizerPlugin(api, consumer, false)
]
};
} else {
optimizeDeps.esbuildOptions = {
plugins: [
{ name: optimizeSveltePluginName, setup: () => {} },
{ name: optimizeSvelteModulePluginName, setup: () => {} }
esbuildOptimizerPlugin(api, consumer, true),
esbuildOptimizerPlugin(api, consumer, false)
]
};
}
return { optimizeDeps };
},
configResolved(c) {
viteConfig = c;
const optimizeDeps = c.optimizeDeps;
if (rolldownVersion) {
const plugins =
// @ts-expect-error not typed
optimizeDeps.rollupOptions?.plugins?.filter((p) =>
[optimizeSveltePluginName, optimizeSvelteModulePluginName].includes(p.name)
) ?? [];
for (const plugin of plugins) {
patchRolldownOptimizerPlugin(plugin, api.options);
}
} else {
const plugins =
optimizeDeps.esbuildOptions?.plugins?.filter((p) =>
[optimizeSveltePluginName, optimizeSvelteModulePluginName].includes(p.name)
) ?? [];
for (const plugin of plugins) {
patchESBuildOptimizerPlugin(plugin, api.options);
}
}
},
async buildStart() {
if (!api.options.prebundleSvelteLibraries) return;
Expand All @@ -94,54 +78,72 @@ export function setupOptimizer(api) {
}

/**
* @param {EsbuildPlugin} plugin
* @param {import('../types/options.d.ts').ResolvedOptions} options
* @param {import('../types/plugin-api.d.ts').PluginAPI} api
* @param {'server'|'client'} consumer
* @param {boolean} components
* @return {EsbuildPlugin}
*/
function patchESBuildOptimizerPlugin(plugin, options) {
const components = plugin.name === optimizeSveltePluginName;
function esbuildOptimizerPlugin(api, consumer, components) {
const name = components ? optimizeSveltePluginName : optimizeSvelteModulePluginName;
const compileFn = components ? compileSvelte : compileSvelteModule;
const statsName = components ? 'prebundle library components' : 'prebundle library modules';
const filter = components ? /\.svelte(?:\?.*)?$/ : /\.svelte\.[jt]s(?:\?.*)?$/;
plugin.setup = (build) => {
if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
const generate = consumer === 'server' ? 'server' : 'client';

/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
let statsCollection;
build.onStart(() => {
statsCollection = options.stats?.startCollection(statsName, {
logResult: (c) => c.stats.length > 1
return {
name,
setup(build) {
if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;

/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
let statsCollection;
build.onStart(() => {
statsCollection = api.options.stats?.startCollection(statsName, {
logResult: (c) => c.stats.length > 1
});
});
});
build.onLoad({ filter }, async ({ path: filename }) => {
const code = readFileSync(filename, 'utf8');
try {
const result = await compileFn(options, { filename, code }, statsCollection);
const contents = result.map
? result.code + '//# sourceMappingURL=' + result.map.toUrl()
: result.code;
return { contents };
} catch (e) {
return { errors: [toESBuildError(e, options)] };
}
});
build.onEnd(() => {
statsCollection?.finish();
});
build.onLoad({ filter }, async ({ path: filename }) => {
const code = readFileSync(filename, 'utf8');
try {
const result = await compileFn(
api.options,
{ filename, code },
generate,
statsCollection
);
const contents = result.map
? result.code + '//# sourceMappingURL=' + result.map.toUrl()
: result.code;
return { contents };
} catch (e) {
return { errors: [toESBuildError(e, api.options)] };
}
});
build.onEnd(() => {
statsCollection?.finish();
});
}
};
}

/**
* @param {RollupPlugin} plugin
* @param {import('../types/options.d.ts').ResolvedOptions} options
* @param {import('../types/plugin-api.d.ts').PluginAPI} api
* @param {'server'|'client'} consumer
* @param {boolean} components
* @return {import('vite').Rollup.Plugin}
*/
function patchRolldownOptimizerPlugin(plugin, options) {
const components = plugin.name === optimizeSveltePluginName;
function rolldownOptimizerPlugin(api, consumer, components) {
const name = components ? optimizeSveltePluginName : optimizeSvelteModulePluginName;
const compileFn = components ? compileSvelte : compileSvelteModule;
const statsName = components ? 'prebundle library components' : 'prebundle library modules';
const includeRe = components ? /^[^?#]+\.svelte(?:[?#]|$)/ : /^[^?#]+\.svelte\.[jt]s(?:[?#]|$)/;
const generate = consumer === 'server' ? 'server' : 'client';
/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
let statsCollection;

/**@type {import('vite').Rollup.Plugin}*/
const plugin = {
name
};
plugin.options = (opts) => {
// @ts-expect-error plugins is an array here
const isScanner = opts.plugins.some(
Expand All @@ -160,14 +162,14 @@ function patchRolldownOptimizerPlugin(plugin, options) {
*/
async handler(code, filename) {
try {
return await compileFn(options, { filename, code }, statsCollection);
return await compileFn(api.options, { filename, code }, generate, statsCollection);
} catch (e) {
throw toRollupError(e, options);
throw toRollupError(e, api.options);
}
}
};
plugin.buildStart = () => {
statsCollection = options.stats?.startCollection(statsName, {
statsCollection = api.options.stats?.startCollection(statsName, {
logResult: (c) => c.stats.length > 1
});
};
Expand All @@ -176,15 +178,17 @@ function patchRolldownOptimizerPlugin(plugin, options) {
};
}
};
return plugin;
}

/**
* @param {import('../types/options.d.ts').ResolvedOptions} options
* @param {{ filename: string, code: string }} input
* @param {'client'|'server'} generate
* @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection]
* @returns {Promise<import('../types/compile.d.ts').Code>}
*/
async function compileSvelte(options, { filename, code }, statsCollection) {
async function compileSvelte(options, { filename, code }, generate, statsCollection) {
let css = options.compilerOptions.css;
if (css !== 'injected') {
// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
Expand All @@ -196,7 +200,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
...options.compilerOptions,
css,
filename,
generate: 'client'
generate
};

if (compileOptions.hmr && options.emitCss) {
Expand Down Expand Up @@ -252,15 +256,16 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
/**
* @param {import('../types/options.d.ts').ResolvedOptions} options
* @param {{ filename: string; code: string }} input
* @param {'client'|'server'} generate
* @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection]
* @returns {Promise<import('../types/compile.d.ts').Code>}
*/
async function compileSvelteModule(options, { filename, code }, statsCollection) {
async function compileSvelteModule(options, { filename, code }, generate, statsCollection) {
const endStat = statsCollection?.start(filename);
const compiled = svelte.compileModule(code, {
dev: options.compilerOptions?.dev ?? true, // default to dev: true because prebundling is only used in dev
filename,
generate: 'client'
generate
});
if (endStat) {
endStat();
Expand Down Expand Up @@ -311,21 +316,6 @@ async function svelteMetadataChanged(cacheDir, options) {
return currentSvelteMetadata !== existingSvelteMetadata;
}

/**
*
* @param {string} name
* @returns {import('vite').Rollup.Plugin}
*/
function placeholderRolldownOptimizerPlugin(name) {
return {
name,
options() {},
buildStart() {},
buildEnd() {},
transform: { filter: { id: /^$/ }, handler() {} }
};
}

/**
* @param {import('../types/options.d.ts').ResolvedOptions} options
* @returns {Partial<import('../types/options.d.ts').ResolvedOptions>}
Expand Down
Loading