---
navigationLabel: Tree-shaking
order: 7
---

# Tree-shaking

While Popper v2 saw a sizeable decrease in bundle size from v1 (-2 kB from ~7 kB
minzipped to ~5 kB minzipped), this is still not optimal.

Popper addresses a lot of use cases and complexity, but to help keep consumers'
bundle sizes small, we made the library tree-shakable. "Tree-shaking" is the
process of eliminating unused code from your bundles, which is achieved by
bundlers such as webpack, Rollup and Parcel.

If you're using the CDN, tree-shaking will not be available.

## Popper Lite

The most straightforward way to enable tree-shaking is to use Popper Lite and
configure it with your needs.

Instead of:

```js
// ❌ Imports all of Popper!
import { createPopper } from '@popperjs/core';
```

Use:

```js
// ✅
import { createPopper } from '@popperjs/core/lib/popper-lite';
```

Popper Lite only comes with the following modifiers:

- `popperOffsets`
- `computeStyles`
- `applyStyles`
- `eventListeners`

This effectively achieves the bare minimum functionality, and is around 3 kB
minzipped. If 3 kB is still too much for your application, we recommend trying
out CSS tooltip alternatives which are as tiny as 1 kB. Please note that such
libraries have many disadvantages that Popper doesn't, so assess the trade-offs
where necessary.

Now, you'll need to add the modifiers you need. These are accessible under the
`@popperjs/core/lib/modifiers/` directory.

Generally, we recommend `flip` and `preventOverflow` since these are the most
attractive reasons for using Popper in the first place:

```js
import { createPopper } from '@popperjs/core/lib/popper-lite';
import flip from '@popperjs/core/lib/modifiers/flip';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';

createPopper(reference, popper, {
  modifiers: [flip, preventOverflow]
})
```

### Popper Generator

To pass these extra modifiers as default, you can use the `popperGenerator`
function:

```js
import {
  popperGenerator,
  defaultModifiers,
} from '@popperjs/core/lib/popper-lite';
import flip from '@popperjs/core/lib/modifiers/flip';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';

const createPopper = popperGenerator({
  defaultModifiers: [...defaultModifiers, flip, preventOverflow],
});

// Now you can use `createPopper`
```
