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.
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:
The following commands will bundle and tree-shake this example code with esbuild.
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.