Skip to content
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.

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

perf: inline default imports into template #13242

Closed
wants to merge 1 commit into from

Conversation

benmccann
Copy link
Member

@benmccann benmccann commented Sep 13, 2024

#13075 reduced the size of the compiled output on my site quite a lot. However, there are still hundreds of lines (~8kb) of output remaining created as the result of referencing a pair of imported SVGs that can be removed from my site by also inlining imports with this PR

Copy link

changeset-bot bot commented Sep 13, 2024

🦋 Changeset detected

Latest commit: 84d1cfb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@benmccann benmccann added the perf label Sep 15, 2024
} else {
return false;
}
has_expression_tag = true;
}
}
return has_expression_tag;
return { need_to_escape };
Copy link
Member

Choose a reason for hiding this comment

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

Really not a fan of a function returning false | { need_to_escape: boolean } — it's a messy and confusing type. If a function name begins with is_ then it ought to return a boolean; if it needs to return more granular information than that then something like analyze_expression would probably be better

@Rich-Harris
Copy link
Member

Technically this is unsafe. There's nothing special about default imports that makes them non-live, it's purely about the way that they're conventionally exported. When you do something like this...

export default foo;

...you're effectively declaring a hidden variable and exporting that as the default:

const __default = foo;
export { __default as default };

Since __default is initialized to the current value of foo and never subsequently updated, it doesn't change when foo changes. But you could equally do this, and it would be live:

export { foo as default };

The consequence is that when you see import foo from './foo.js' you can usually expect that it's not a live binding. But you can't guarantee it. As such, I'm nervous about making this change.

@benmccann
Copy link
Member Author

hmm. yeah. I'm glad we have your arcane knowledge of JS because I had no idea that was a thing

I'll try to solve this on the Vite side then: vitejs/vite#18119

@benmccann benmccann closed this Sep 16, 2024
@benmccann benmccann deleted the inline-default-imports branch September 16, 2024 17:57
@Rich-Harris
Copy link
Member

Realised we couldn't do this even if we didn't have to worry about live bindings — this button won't be enabled on hydration, because the button.disabled = server is moved into the template (which is disregarded during hydration):

<script>
  import server from './is-server.js';
</script>

<button disabled={server}>
  {server ? "can't click me yet" : 'click me!'}
</button>

The text is updated, but you still can't click the button.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants