trussworks / react-uswds

USWDS 3.0 components built in React
https://trussworks.github.io/react-uswds/
Apache License 2.0
175 stars 79 forks source link

[fix] Using react-uswds results in extremely large client bundles because tree shaking does not remove unused icons #1913

Open lpsinger opened 2 years ago

lpsinger commented 2 years ago

ReactUSWDS Version & USWDS Version:

@trussworks/react-uswds@2.8.0, uswds@2.11.2

Describe the bug

The most minimal use of react-uswds results in an extremely large bundle size because tree shaking does not remove dead code for unused SVG icons.

To Reproduce

For a minimal reproducer, see https://github.com/lpsinger/react-icon-treeshake. The code consists of just this:

import {
  IconGitHub
} from '@trussworks/react-uswds'

export default function () {
  return <IconGithub />
}

The following commands will bundle and tree-shake this example code with esbuild.

$ git clone https://github.com/lpsinger/react-icon-treeshake.git
$ cd react-icon-treeshake/
$ npm ci
$ npm run build
$ ls -lh output.js 
-rw-r--r--  1 user  group   533K Feb 25 16:52 output.js

The output bundle is over 0.5 MB in size, and contains SVG markup for all of the USWDS icons.

Expected behavior

The size of the tree-shaken and minified output bundle should be well under 100 kB, and it should only contain embedded SVG markup for the one icon that is used.

sawyerh commented 11 months ago

In a way, I think https://github.com/trussworks/react-uswds/issues/2540 relates to this issue which relates to how everything is exported together.