https://github.com/patricklafrance/rac-webpack-tree-shaking

POC to test React Aria Components tree shaking with webpack
https://github.com/patricklafrance/rac-webpack-tree-shaking

Last synced: about 1 month ago
JSON representation

POC to test React Aria Components tree shaking with webpack

• Host: GitHub
• URL: https://github.com/patricklafrance/rac-webpack-tree-shaking
• Owner: patricklafrance
• Created: 2023-12-08T02:27:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-19T15:12:29.000Z (9 months ago)
• Last Synced: 2024-03-15T10:32:37.884Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 284 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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:

```bash

pnpm install

```

Build the code:

```bash

pnpm build

```

If you want to serve the build:

```bash

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`:

```jsx

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

...

 {

        alert("You clicked me!");

    }}

>

    Click me

```

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

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

```jsx

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

...

 {

        alert("You clicked me!");

    }}

>

    Click me

    Aardvark

    Cat

    Dog

    Kangaroo

    Panda

    Snake

```

Open the [dist/main.js](./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](https://webpack.js.org/plugins/terser-webpack-plugin/) 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](https://www.npmjs.com/package/webpack-bundle-analyzer) plugin to test this as it isn't able to consider tree shaking in the stats that it shows: https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/161

## Notes

Next time, use the sourcemaps to identify what's end up in the bundle as suggested by [Devon](https://github.com/adobe/react-spectrum/discussions/5204#discussioncomment-7795915).