Bundle Size

The size of Geist at the completion of full packing is about 111kb (Gzipped), This is a good score when comparing the size of modern client applications and will not impact the performance of your application. As a matter of engineering practice, it is recommended that you always split Geist as a separate chunk within your application to get fixed caching.

For higher first screen load speed, try using Server Side Rendering or perform volume optimization as described below.

Auto Tree-shaking

For projects using webpack 5.0 or higher, there is no need to add any configuration to get full tree-shaking. As long as you use the ES module to import Geist, you can automatically remove unnecessary components during bundle.

Generally this means that the scaffolding you are using needs to be larger than the following versions

  • Webpack: >= 5.0
  • Next.js: >= 11.0
  • React scripts (CRA): >= 5.0

Recommended Examples

Import single component manually

For projects with package size requirements, you can choose to import single component manually.

Manually import single components does not guarantee 100% that only a single component will be packaged, as some components will depend on each other, for example, if only a single Snippet component is used in a project, the bundle package will also contain the Toast component. However, this type of optimization can still reduce the size of your application significantly, provided you only use a small amount components.

import Button from '@geist-ui/core/esm/button'

const MyComponent = () => <Button>Submit</Button>

With Babel

If your project does not support ES Module at the moment, you can use the Babel plugin to reduce the build size.

Geist follows the Tree Shaking naming scheme (from community convention), this will be helpful for some legacy projects. This allows you to import in the full amount of components, but automatically exclude the parts that are not really used when packaging. This feature is usually used in conjunction with the babel-plugin-import tool.

A classic use case is to add the following config to the .babelrc:

.babelrc
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@geist-ui/core",
        "libraryDirectory": "esm"
      }
    ]
  ]
}

Legacy Examples