Improve compilation speed (and potentially bundle size)

[timneutkens]

• Ensure sideEffects: false to enable additional tree shaking
• Use granular imports of Mantine specific components
• Ensure css is marked as sideEffect (mirror mantine config)

While investigating a report of slow compilation in Turbopack (with Next.js) I found that BlockNote is causing all of Mantine to be compiled as it uses import * as Mantine from '@mantine/core'. @mantine/core is quite large by itself so even if tree shaking kicks in when building for production it still adds overhead in development when trying to import all components from it.

This PR ensures that only the components that are used are imported. It also adds sideEffects: false config which ensures bundlers can make more assumptions about the code and optimize it further.

Here's a screenshot from our tracing tooling:

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jun 6, 2024 7:41pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jun 6, 2024 7:41pm

[vercel[bot]]

@timneutkens is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[YousefED]

Bedankt @timneutkens 👋

This is great. We'll make sure this gets merged and shipped as part of next release.

Do you have a link to the specific report or is it not on github?

[timneutkens]

No worries! The report was on X, more details here: https://x.com/timneutkens/status/1797974591513542785

You can have a look at the trace files shared using next internal turbo-trace-server /path/to/trace.log (when using next@canary) in case you're curious.

[matthewlipski]

Thanks! I made the same changes to the Ariakit and ShadCN packages, likely those suffer from the same compilation speed issues but this wasn't seen in the report as you would ofc only use one out of the three. Additionally I added the "Mantine-" prefix to all Mantine components just to make it a bit more explicit which components are imported and which are defined.

[timneutkens]

Awesome, thanks Matthew! 🚀

[timneutkens]

(Off topic: this is a cool project!)