Skip to main content

Tree Shaking

Tree shaking, also known as dead code elimination, is a technique to keep JavaScript bundle sizes as small as possible.

Removing such code has several benefits: it shrinks program size, an important consideration in some contexts, and it allows the running program to avoid executing irrelevant operations, which reduces its running time.

How to use Tree Shaking

Step 1 - Use one of the popular JavaScript build tools such as Webpack, Rollup, or Vite. We have verified that tree shaking works with these tools.

Step 2 - Use ES Modules (ESM) for your front-end build. While the ESM transition is still in progress, using ESM during development on front end projects is largely stable.

How to verify it is working

We recommend using the source-map-explorer tool to analyze which dependencies end up in your production build. source-map-explorer reviews build output, so it represents the code that will actually be shipped to the browser.


The Medplum Hello World project uses tree shaking. The project is pre-configured with source-map-explorer, so you can quickly analyze the bundle size.

Medplum Hello World Tree Shaking

Behind the scenes

Medplum libraries such as @medplum/core and @medplum/react follow best practices, so tree shaking should work automatically for most build tools.

  • Libraries ship with preserveModules for ESM builds
  • Libraries ship with "sideEffects": false

Additional reading