Tree Shaking Issue: Unused Code in the payload

[tcmhoang]

Hey there, 👋

I was benchmarking the website I built using this library with the official demo, and it came to my understanding that the tree-shaking result seems to be off.

Here's the unused css file loaded in the package demo site

Notice we don't have the code section in the home page

The main reason appears to be the way components are imported into the generated code. ATM everything is imported eagerly (import * from...) from the transformer file, which confuses Vite and prevents it from optimizing the bundle size effectively. This means the payload sent to the user (both CSS and JS) is larger than it needs to be, containing unused code.

Here the code generated by transformer

<script context="module">
	export const frontmatter = { title: 'Home' };
</script>

<script>
	import * as INTERNAL__TAGS from '../lib/Tags.svelte';
	import * as INTERNAL__NODES from '../lib/Nodes.svelte';
	import INTERNAL__LAYOUT from '../lib/layouts/Default.svelte';
</script>

<INTERNAL__LAYOUT {...frontmatter}
	><article>
		<INTERNAL__TAGS.CTA
			><p>
				This library brings the power of <a href="https://markdoc.dev/">Markdoc</a> right into your
				<a href="https://svelte.dev">Svelte</a> applications!
			</p></INTERNAL__TAGS.CTA
		><INTERNAL__NODES.Heading level={2}>Features</INTERNAL__NODES.Heading><INTERNAL__TAGS.Matrix
			><INTERNAL__TAGS.Matrix_Item title="SvelteKit"
				><p>Use Markdoc in your Svelte applications.</p></INTERNAL__TAGS.Matrix_Item
			><INTERNAL__TAGS.Matrix_Item title="Components"
				><p>
					Access your Svelte components directly as Markdoc tags or nodes.
				</p></INTERNAL__TAGS.Matrix_Item
			><INTERNAL__TAGS.Matrix_Item title="Layouts"
				><p>Add a default and also named layouts.</p></INTERNAL__TAGS.Matrix_Item
			><INTERNAL__TAGS.Matrix_Item title="Partials"
				><p>Automatically import partials from a directory.</p></INTERNAL__TAGS.Matrix_Item
			><INTERNAL__TAGS.Matrix_Item title="Typescript"
				><p>Supports Typescript and JSDoc out of the box.</p></INTERNAL__TAGS.Matrix_Item
			><INTERNAL__TAGS.Matrix_Item title="IDE"
				><p>
					Syntax highlighting and autocompletion in Visual Studio Code.
				</p></INTERNAL__TAGS.Matrix_Item
			></INTERNAL__TAGS.Matrix
		>
	</article></INTERNAL__LAYOUT
>

Notice we use the import * there.

I was thinking 🤔, we should first travel the whole examining document first to see all the possible outcomes for both imported tags and nodes. And then from the result we got back, we can identify which nodes and tags should be imported individually instead of using the import * from....

It should be like this:

<script>
	import {Matrix_Item} from '../lib/Tags.svelte';
	import {Heading as INTERNAL_NODES.Heading } from '../lib/Nodes.svelte'; // Or we can use aliases
	import INTERNAL__LAYOUT from '../lib/layouts/Default.svelte';
</script>

What do you think?

[TorstenDittmann]

That actually sounds like a good idea, the current implementation is basically a shortcut I took to get things going 👍🏻

[tcmhoang]

@TorstenDittmann Just submitted a PR #145 to address that issue we discussed. The update involves changes to the generated Svelte content, which caused the test suite to fail.

No worries though, I'll update the test cases to reflect the changes as well, if you like what I've done in the PR. Just let me know what you think.