Support tree-shaking

[TheRusskiy]

Support tree-shaking by enabling preserveModules

In order to enable tree-shaking, we need to specify sideEffects: true,
unfortunately, after experiments, it turned out not to be enough and I had to enable preserveModules, which webpack seems to be able to use to properly remove unused code, that part was Inspired by jaredpalmer/tsdx#276

I first noticed that headless-ui is not being tree-shaked in lighthouse:

After adding the changes in this PR the packages is no longer showing up as unused:

I also ran @next/bundle-analyzer
Before:

After:

Also, before / after results from Chrome:

[vercel]

@TheRusskiy is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-react – ./packages/@headlessui-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/AZyErYzMxkdzJhEgUwnGCWdUAAga
✅ Preview: https://headlessui-react-git-fork-therusskiy-tree-shaking-tailwindlabs.vercel.app

[rozenmd]

This looks awesome - I was just looking at headlessui and trying to work out why importing a single <Transition> component would cost 50KiB in bundle size.

[TheRusskiy]

@rozenmd until this is fixed, if you want to, you could use
https://www.npmjs.com/package/headlessui-react-shake
it's this PR published to NPM
version 1.2.0

[RobinMalfait]

Hey! Thank you for your PR!
Much appreciated! 🙏

I've been looking at treeshaking, by moving to esbuild and bumping typescript. This is not 100% straight forward because esbuild doesn't support UMD last time I checked and a few other quircks.

Thank you for doing this!