Skip to content

Lazy-load GraphiQL CSS

Created by: sqs

Removing GraphiQL CSS from our main CSS bundle reduces its size (unminified/uncompressed) from 864kb to 662kb, a 25% savings. GraphiQL is only used on the API console.

I presume there would be a similar savings on the JS side, too. I suspect the main win would be saving on parsing/computation, not on downloads, since minification probably compresses these rules pretty well.

When doing this, we need to be careful that this doesn't make another kind of problem more likely: not noticing when GraphiQL's CSS conflicts with our other CSS rules. This is easy to spot now because we always load GraphiQL's CSS. If we only start loading it lazily, then it will be much easier to miss this problem if it is reintroduced later (eg due to a dep upgrade).

Not a high priority.