Repository navigation
Better tree-shaking for React components #730
Description
Hi! Thanks for your work! Love microbundle and use it every day.
I'm the maintainer of an open-source React-components library and I recently noticed that when I use React.forwardRef or React.memo the components became un-tree-shakeable.
I dig into this problem and found out that Babel fixed that several months ago in their @babel/preset-react package:
https://babeljs.io/blog/2020/05/25/7.10.0#better-tree-shaking-for-react-components-11428httpsgithubcombabelbabelpull11428
Unfortunately, I couldn't find a way to use it with microbundle.
Activity
developit commentedon Sep 23, 2020
I believe currently we remove
@__PURE__annotations, which is affecting this.omgovich commentedon Sep 24, 2020
Hi, @developit! Thanks for fast response)
As far as I understand there is no way to automatically mark things like
React.forwardRefas pure annotations except using@babel/plugin-transform-react-pure-annotations(which is included to@babel/preset-react).omgovich commentedon Sep 24, 2020
See: https://github.com/babel/babel/pull/11428/files
developit commentedon Nov 5, 2020
Have you tried using a custom babel configuration with Microbundle?
.babelrc/"babel"in package.json is supported, so you could add{"presets":["@babel/preset-react"]}.omgovich commentedon Nov 6, 2020
Hi @developit!
Started to dig deeper into my build output.
First thing I found out that if I set
--no-compressmy bundle has/*#__PURE__*/. If compression is enabled, all comments including PURE ones are gone.I assume that Terser just cleans all comments. Probably we should find a way to "ask" him to leave
/*#__PURE__*/.omgovich commentedon Nov 6, 2020
Second thing:
@babel/plugin-transform-react-pure-annotationsis a part of@babel/preset-reactwhich already installed to my project withmicrobundle. Besides that@babel/preset-react(tried to add this viababelrc) doesn't add/*#__PURE__*/toReact.memoandReact.lazy.But If I add
@babel/plugin-transform-react-pure-annotationsto babel config, it works:omgovich commentedon Nov 6, 2020
As far as I understand
@babel/preset-reacthas to add@babel/plugin-transform-react-pure-annotationsifpureoption isn'tfalse:https://github.com/babel/babel/blob/main/packages/babel-preset-react/src/index.js
But it doesn't work for some reason:
omgovich commentedon Nov 6, 2020
I guess I found the reason:
microbundleenables@babel/preset-reactonly if--jsxImportSourcewas passed (see screenshot above).But I don't have one on my CLI command.
omgovich commentedon Nov 6, 2020
I'm not sure that it's the correct behavior. I mean shouldn't
microbundleuse default React setup if nojsxImportSourceoption present?I read the docs and it felt like this option is for custom stuff:
omgovich commentedon Nov 6, 2020
So there are two things to solve:
/*#__PURE__*/after compression.@babel/preset-reactfor React apps?omgovich commentedon Nov 6, 2020
Terser preserves PURE comments since 4.6.3:
terser/terser@35b1723
preserve_annotationsoption isfalseby default.https://github.com/terser/terser#format-options
omgovich commentedon Nov 6, 2020
I assume the rollup plugin that microbundle use now doesn't support that:
omgovich commentedon Nov 6, 2020
Next versions of
rollup-plugin-terserrequirerollupv2, so probably that's not so easy to fix 😞developit commentedon Nov 6, 2020
There's a PR open that updates all of our dependencies. In Terser 4, the option is
output.preserveComments.omgovich commentedon Nov 9, 2020
Hi! What about
@babel/preset-react? What is the preferable way to use it with React?developit commentedon Dec 18, 2020
This should all be fixed as of #738. The release will go out shortly.