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

Tree shaking #303

Closed
SimeonGriggs opened this issue Apr 4, 2021 · 14 comments
Closed

Tree shaking #303

SimeonGriggs opened this issue Apr 4, 2021 · 14 comments

Comments

@SimeonGriggs
Copy link

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v0.2.0

What browser are you using?

Chrome

Reproduction repository

https://github.com/tailwindlabs/tailwindcss.com

(As mentioned in Discord)

I don't think Tree Shaking is working / fully optimized. You can see this even in the bundle on tailwindcss.com – the only Component in use is <Switch /> and yet inspecting the (impressive!) coverage of the website's Next.js bundle contains references to headlessui-menu, headlessui-listbox, etc.

This is more problematic using Components from the dev branch where even more Components are bundled – whether they're in use or not.

(I could be misunderstanding something about the nature/purpose/design of tree shaking in this context I just thought to mention it)

Screen_Shot_2021-04-03_at_1 35 26_pm

@henribru
Copy link
Contributor

henribru commented Apr 29, 2021

I think I'm seeing the same thing with Vue CLI. Here's from webpack-bundle-analyzer after doing import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue":
image

Edit: Actually I am seeing a difference in the parsed and gzipped sizes depending on how many Headless UI components I import, so perhaps it is working.

@Bessonov
Copy link

It seems like some parts are not optimized or can't be optimized. Just installed headlessui and used only one definition:

import { Transition } from '@headlessui/react'

Now it's second biggest dep:

@[email protected][email protected]/node_modules/@headlessui/react/dist/headlessui.esm.js • 53.52 KB • 18.3%

Looking at the original file:

151616 Mai 30 17:32 headlessui.esm.js

it's a reduction, but, well, still too big.

@RobinMalfait
Copy link
Member

Hey! Thank you for your bug report!
Much appreciated! 🙏

This PR that was already merged improves tree shaking a lot: #602

@deadcoder0904
Copy link

@RobinMalfait do i need to enable anything to make it work? i'm using next.js & only Dialog but still getting a lot of unused code in my coverage report.

@evanfrawley
Copy link

Seeing the same. Locally running with @headlessui/react and importing Menu & Listbox, and I'm seeing this when I search the source in Chrome dev tools:
CleanShot 2022-02-28 at 12 38 14

@Ojay
Copy link

Ojay commented Mar 1, 2022

Hey all, I'm just re-visiting this package as the lack of tree shaking made me opt for another approach a few months ago. Looking to add this to a new project (also Next.js like @deadcoder0904) but want to make sure tree shaking is being fully handled first?

Thanks for all your hard work!

@TheRusskiy
Copy link
Contributor

hey guys, maybe something changed and tree shaking got broken along the way.
I can take a look later because right now trying to flee Russia 😬

@Ojay
Copy link

Ojay commented Mar 1, 2022

Yeah well first things first... 😂

Best of luck!

@deadcoder0904
Copy link

yeah, @TheRusskiy this can wait, take care :)

@nandorojo
Copy link

nandorojo commented Nov 8, 2022

Hate to be that guy, but did anyone figure out how to tree shake here?

I'm getting 65kb from just from Combobox.

Screen Shot 2022-11-07 at 8 39 45 PM

@cpakken
Copy link

cpakken commented Dec 14, 2022

😢still no treeshaking. I just want to use <Transition /> my bundle increased by 225kB 😲

@BasicallyMe
Copy link

has treeshaking been implemented?👀

@antoniormrzz
Copy link

Seems to be working with vite swc, 11KB when only switch is used.

@RobinMalfait
Copy link
Member

@BasicallyMe there is not a lot to implement here (sure we can make sure that we don't include everything in every file, or that we don't mess with globals), but typically you don't implement tree shaking in the library.

We are the tree, you have to shake it.

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

No branches or pull requests