build size

[freeman-lab]

I just noticed something about our build size that warrants further investigation. Because of this declaration in _app.js

import { LiveCode, Pre } from '@carbonplan/prism'
import Blockquote from '../components/blockquote'

const components = {
  code: LiveCode,
  pre: Pre,
  blockquote: Blockquote,
}

all pages in the resulting site have very large sizes (300kb+). By removing different components and rebuilding I confirmed LiveCode is the bulk of the problem. The syntax highlighting in just the Code component would be smaller, but still add a fair bit. This makes sense — with this configuration, all pages have LiveCode loaded whether or not they use it.

I think the right solution would be to move the MDXProvider into a page-specific wrapper here, and when we build the individual pages, pick which additional components to include based on page metadata. For example, we could have include

components: ['LiveCode', 'BlockQuote']

in the metadata to specify that a specific page needs these extra components. Open to alternatives, but we should solve this one way or another. No need for such large builds on otherwise tiny sites!