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

Make sure the output can be treeshaked #259

Merged
merged 2 commits into from
Oct 7, 2024
Merged

Conversation

sandhose
Copy link
Member

@sandhose sandhose commented Oct 7, 2024

Fixes element-hq/compound#318

This tells rollup/vite to preserve the file structure of the source directory instead of bundling everything into a single file.

This means that as a downstream package, you'll only import what you need, and the rest will be tree-shaken for you.
Compound itself is rather small, but it has a few dependencies that only a handful of components use.
This means that if you only import a few components, it will be much smaller as it won't include @radix-ui/* and @floating-ui/* stuff.

Here is the diff on a quick hello-world project bundle analysis, which just imports a Button:

Before

image

Total gzipped size: 89.15kB

After

image

Total gzipped size: 46.60kB


In MAS, it means it can code-split way better, putting a lot of compound components out of the main bundle:

image

@sandhose sandhose requested a review from a team as a code owner October 7, 2024 08:08
@sandhose sandhose requested review from dbkr and removed request for a team October 7, 2024 08:08
Copy link

cloudflare-workers-and-pages bot commented Oct 7, 2024

Deploying compound-web with  Cloudflare Pages  Cloudflare Pages

Latest commit: 01d435d
Status: ✅  Deploy successful!
Preview URL: https://651be320.compound-web.pages.dev
Branch Preview URL: https://quenting-treeshakable.compound-web.pages.dev

View logs

@@ -5,10 +5,11 @@
"type": "module",
"main": "./dist/compound-web.js",
"module": "./dist/compound-web.js",
"sideEffects": false,
Copy link
Member Author

Choose a reason for hiding this comment

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

This tells downstream bundlers that there is no side-effect importing compound, which lets them actually treeshake stuff out

Comment on lines +11 to +12
"require": "./dist/index.cjs",
"import": "./dist/index.js",
Copy link
Member Author

Choose a reason for hiding this comment

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

Because we changed the fileName pattern, the output files match the input files structure in src/

Copy link
Member

@dbkr dbkr left a comment

Choose a reason for hiding this comment

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

Nice, thanks!

@sandhose sandhose merged commit 49b90bc into main Oct 7, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

compound-web doesn't tree-shake at all
2 participants