Similar to Tree shaking create-react-app? but more of how to validate and fix.
So I have a created a library of react hooks. In there I added an example to help me understand how tree-shaking would work.
import { useClock, useDeepState } from '@trajano/react-hooks';
export function App(): JSX.Element {
useClock();
useDeepState("foo");
return <div>Hello world</div>
}
However, there's a function called useAsyncSetEffect that I added in my library code base, but tracing through the code for useClock and useDeepState I don't hit that function at all, but when I look at the generated files I see a reference to useAsyncSetEffect.
Not really sure what's causing it, the library isn't large so the size is just a K gzipped, but I am curious as to why it is being included.
In package.json "module": "dist/index.modern.js",
After trying a few things I found out it's an addition needed on the package.json of my library. Since I am building both modern and cjs using
"build": "microbundle-crl --format modern,cjs",
It generates a version of the code that will make use of the module system. Since it makes use of the module system it is able to tree shake correctly and I reduced the code after.
44.62 KB (-11.02 KB) build\static\js\2.7a693cc3.chunk.js
800 B build\static\js\runtime-main.21ea8395.js
619 B (-601 B) build\static\js\main.21098aa9.chunk.js
Incidentally it also reduced the code in the 2. chunk which houses more of the React code and it's nice that it significantly reduced it size by 11k
The note about Keeping babel from transpiling ES6 modules to CommonJS modules provided me with the necessary hint. In addition since I know my code was side effect free I also added "sideEffects": false,