I moved several large SVG illustrations out of Sprites.js and into separate SVG files. These illustrations are mostly used in a single place (or not at all). By extracting them from Sprites.js and putting them in their own files, I was able to load them on demand (as <img src={...}> elements) rather than inlining them in the main JS bundle.
I also changed a couple of places where existing illustrations were being imported as import { ReactComponent as MyImage } from "./path/to/myimage.svg", preferring to instead do import myImage from "./path/to/myimage.svg". The difference between these is that the former causes Webpack to generate a React component for the SVG and include it in the bundle, whereas the latter just makes a hyperlink to the SVG. The former should mostly be avoided, especially for illustrations that are used on a single page or in a single modal, and can be loaded on demand when they're displayed rather than delaying the download of the initial bundle.
This reduces the bundle size by about 400KB.
I moved several large SVG illustrations out of Sprites.js and into separate SVG files. These illustrations are mostly used in a single place (or not at all). By extracting them from Sprites.js and putting them in their own files, I was able to load them on demand (as
<img src={...}>elements) rather than inlining them in the main JS bundle.I also changed a couple of places where existing illustrations were being imported as
import { ReactComponent as MyImage } from "./path/to/myimage.svg", preferring to instead doimport myImage from "./path/to/myimage.svg". The difference between these is that the former causes Webpack to generate a React component for the SVG and include it in the bundle, whereas the latter just makes a hyperlink to the SVG. The former should mostly be avoided, especially for illustrations that are used on a single page or in a single modal, and can be loaded on demand when they're displayed rather than delaying the download of the initial bundle.