rac-webpack-tree-shaking

This is a POC to test if React Aria Components can be tree-shaken when using Webpack 5.

Getting Started

Install the dependencies with:

pnpm install

Build the code:

pnpm build

If you want to serve the build:

pnpm serve-build

What's in this repository?

The index.jsx file render a simple React application with an header and a Button component from react-aria-components. As we only import a single Button component from react-aria-components, we expect that only RAC utils/shared code and the Button component would be added to the production bundle.

Conclusion

Tree-shaking does work but it requires to install the TerserPlugin and having the optimization.usedExports: true configuration.

To test it, first only import the Button component from react-aria-components:

import { Button } from "react-aria-components";

...

<Button
    onClick={() => {
        alert("You clicked me!");
    }}
>
    Click me
</Button>

Then, open the dist/main.js file and search for "listBox". You should find no result.

Then, also import the Listbox component from react-aria-components:

import { Button, ListBox, ListBoxItem } from "react-aria-components";

...

<Button
    onClick={() => {
        alert("You clicked me!");
    }}
>
    Click me
</Button>
<ListBox aria-label="Favorite animal" selectionMode="single">
    <ListBoxItem>Aardvark</ListBoxItem>
    <ListBoxItem>Cat</ListBoxItem>
    <ListBoxItem>Dog</ListBoxItem>
    <ListBoxItem>Kangaroo</ListBoxItem>
    <ListBoxItem>Panda</ListBoxItem>
    <ListBoxItem>Snake</ListBoxItem>
</ListBox>

Open the dist/main.js file and search for "listBox" again. This time, you should find at least one result!

Development mode

There is one issue thought.. Since RAC is released as a single file and the Terser plugin isn't executed when in development, RAC doesn't really benefit from tree shaking when in development.

Webpack bundle analyzer

You can't use the webpack-bundle-analyzer plugin to test this as it isn't able to consider tree shaking in the stats that it shows: webpack-contrib/webpack-bundle-analyzer#161

Notes

Next time, use the sourcemaps to identify what's end up in the bundle as suggested by Devon.