Popper Logo
Popper Logo

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:

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

Use:

// ✅
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:

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:

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`
Edit this page
Virtual Elements
© 2020 MIT License