react-uswds

react-uswds copied to clipboard

ReactUSWDS Version & USWDS Version:

@trussworks/[email protected], [email protected]

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.