Tree shaking fails for imported objects accessed inside $: reactive statements

[adamvleggett]

Describe the bug

When importing a const object from another module and accessing a property of it inside a Svelte $: reactive statement, the entire object is retained in the final bundle, even if only one property is used.

This prevents effective tree shaking and can result in a significant increase in build size if a large object is partly used.

Reproduction

constants.js:

const Constants = {
  AppId: "abc123",
  Unused: "should be tree-shaken"
};
export default Constants;

component.svelte:

<script>
  import Constants from "$lib/utils/constants";

  $: value = Constants.AppId;
</script>

Logs

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 9.42 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    bun: 0.7.3 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 135.1.77.100
    Chrome: 137.0.7151.69
    Edge: 135.0.3179.85
    Safari: 18.5
    Safari Technology Preview: 18.4
  npmPackages:
    svelte: 5.33.10 => 5.33.10

Severity

annoyance

[7nik]

I believe it's not related to Svelte but to Rollup: rollup/rollup#2201

[paoloricciuti]

It's technically related to svelte but we can't do much about it.

The compiled code for that component looks like this

import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import Constants from "$lib/utils/constants";

export default function App($$anchor, $$props) {
	$.push($$props, false);

	const value = $.mutable_source();

	$.legacy_pre_effect(() => (Constants), () => {
		$.set(value, Constants.AppId);
	});

	$.legacy_pre_effect_reset();
	$.init();
	$.pop();
}

Tree shake could technically work if we could do this

import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import Constants from "$lib/utils/constants";

export default function App($$anchor, $$props) {
	$.push($$props, false);

	const value = $.mutable_source();

-	$.legacy_pre_effect(() => (Constants), () => {
+	$.legacy_pre_effect(() => (Constants.AppId),() => {
		$.set(value, Constants.AppId);
	});

	$.legacy_pre_effect_reset();
	$.init();
	$.pop();
}

But that would be a breaking because I'm legacy mode the reactivity is coarse to the object level so if you then reassign a property of Constants that block should rerun.

[adamvleggett]

Thanks for the quick responses. I guess the best solution might be to switch to runes!

[elliott-with-the-longest-name-on-github]

I'm adding the "needs discussion" label just so the maintainers' group doesn't forget to discuss, but my gut feeling is that we'll close this as "optimization we're never going to get to, get on runes when ya can 😉"