Questions about tree shaking, bundling for production

[crstffr]

Hi there,

First off, great work on this library! The docs are truly phenomenal, the components are elegant and their APIs appear to be comprehensive and flexible. I also love that you include custom hooks, many of which I am excited to use in my own apps.

Just for a little background, the app I will be referencing in this discussion is built with Preact v10.6, with Bloomer components (uses Bulma CSS), and bundled via Parcel v1 (have yet to migrate to v2).

Just to test the water, I installed @mantine/core and @mantine/hooks into my app and imported a single component into one of my views: the form <Input/> component.

I ran the production build and checked the file size of the modified view. It had grown by over 600K. It appears that Parcel is not tree shaking out just the one component and it's dependencies, but is instead bundling the entire library.

1. Is Mantine built to support tree shaking down to the component level?
2. Does Mantine require specific configuration to enable tree shaking?
3. What production bundler/builder do you use for apps that use Mantine?

I did not find any previous discussion about this topic, so I hope this is not a duplicate.

Thank you for your time,
Chris

[rtivital]

Hi @crstffr, thanks for kind words! All Mantine packages ship cjs and esm bundles. Most of the modern bundlers support tree shacking with these formats, I've tested tree shacking with webpack 5 and vite, but cannot say anything about parcel as I haven't ever used it.

[crstffr]

Thanks for the quick reply. This is what I am seeing in my app:

When importing from the core, tree shaking does not work, but type inference does work. Like this:

import { Input } from '@mantine/core'

When importing a component directly from cjs/esm folders, tree shaking works, but type inference no longer works. Like this:

import { Input } from '@mantine/core/esm/components/Input/Input';

Question: With webpack and vite, are you able to import components from the core package (not from cjs/esm folders) and have them properly tree shaken during bundling?

[rtivital]

I've set up a demo repo for you, you can check out tree shaking by running npm run profile – https://github.com/rtivital/mantine-tree-shaking-demo

In this repo I use a single TextInput component. Tree shaking will work even with * import:

import * as Mantine from '@mantine/core';

<Mantine.TextInput />

[crstffr]

Wow! That answers my questions.

As a proof of concept, I set up a scaffold project using Vite + Preact + Mantine, and it works as you describe. So, it looks like my current app build process using Parcel v1 does not work the way I need it to, and I likely need to look into a different build system.

Thanks for your help.