vscode-webview-ui-toolkit icon indicating copy to clipboard operation
vscode-webview-ui-toolkit copied to clipboard

Mark React components as Pure for tree-shaking

Open ianobermiller opened this issue 1 year ago • 0 comments

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 avatar Feb 26 '24 18:02 ianobermiller