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

Mark React components as Pure for tree-shaking #543

Open
ianobermiller opened this issue Feb 26, 2024 · 0 comments
Open

Mark React components as Pure for tree-shaking #543

ianobermiller opened this issue Feb 26, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@ianobermiller
Copy link

ianobermiller commented Feb 26, 2024

Feature request

Mark the exported React components as pure so that bundlers can tree-shake the exports:

export const VSCodeBadge = /* @__PURE__ */ wrap(/* @__PURE__ */ vsCodeBadge(), {
	name: 'vscode-badge',
});

Expected behavior

Importing only Button and Checkbox, for example, should not pull in the entire Fast DataGrid component.

Current behavior

Importing anything from @vscode/webview-ui-toolkit/react pulls in every component from @vscode/webview-ui-toolkit.

Use case

I'd like to reduce my bundle size.

Screenshots/references

As a quick example, I found that duplicating @vscode/webview-ui-toolkit/react with only the two components I needed (Button and Checkbox) shaved over 100KB off my minified build size.

I also manually edited node_modules/@vscode/webview-ui-toolkit/react/index.js two add the two pure annotations per component (note you need it for both calls) and that also worked.

@ianobermiller ianobermiller added the enhancement New feature or request label Feb 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant