Improve/fix tree-shaking

Even though we added sideEffects: false to all packages, tree shaking still seems to be an issue.

[jjenzz]

@chaance I just wasn’t sure how to add babel plugins to Parcel at the time and didn’t want to spend too much time on it but @benoitgrelard has figured out that adding .babelrc works fine 🙂

[benoitgrelard]

I’ve done a couple of days of heavy digging on this…

Given we’ve all already (or about to) wind up for the end of the year, I thought I’d summarise where we’re at with this here, given that I’d rather pick it back up in Jan as it’s a decent task with lots of impacts on build tooling, etc

So here goes…

---

As far I can tell, we have 3 main culprits preventing us from having tree-shaking work for us:

• the way our builds are setup
• Xxx.displayName = "Xxx"; statements
• forwardRefWithAs calls

build setup issues

Firstly, our default build is a production build with minification turned on. This means that although, parcel adds /*#__PURE__*/ annotations on react calls, etc (via babel), it also actually removes the comments using terser (because it minifies…)

displayName

It seems static properties on functions are basically a no go for tree-shaking. This article sums it up nicely. It has to do with how optimizers like terser compress code with statics.

We can resolve this easily using a babel plugin to:

• wrap our displayName statements in if(process.env.NODE_ENV !=== "production") checks
• or manually wrap them in if (__DEV__) checks and have a babel plugin to replace that to the above check

I have tested both approaches and they both work well.

forwardRefWithAs

The same way babel-plugin-transform-react-pure-annotations adds /*#__PURE__*/ annotations to certain react calls (including forwardRef) we also need to do the same with our own custom forwardRefWithAs.

Again, this is fairly easy to do with a custom babel plugin. I have done it and tested it and it works great.

---

Now, I also think we have other issues with our build which prevent us from having this all work nicely, it’s all a bit intermingled. For example parcel seems to eagerly replace process.env.NODE_ENV which means its value ends up being hardcoded in the dist files.

That means this is actually forcing us to create development and production builds of each package, which we started looking into but brought a bunch of other surprises/issues.

---

NOTE: I have tested all of the above only with @radix-ui/react-avatar package so it was easier to identify the issues. I don’t think we’re guaranteed that these are the only issues. I am pretty sure for examples at least a few other calls will need to be annotated but at this point then it’s pretty simple to do once we have the whole infra in place (ie. the custom babel plugin working, etc).

I have pushed my current WIP to a branch called tree-shaking-experimentation