Performance

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`

Attaching elements to the DOM

The recommended way to use Popper is to attach popper elements next to their reference elements.
This ensures that accessibility best practices are followed, such as keyboard navigation and screen reader support.

There are cases where you may want to attach popper elements to the top of the DOM, such as <body />, this is of course supported as well, but some measures should be taken to ensure that everything works in the best possible way.

To ensure the best possible performance, it's recommended to not attach elements directly to the <body /> element, but instead create a <div /> element right within the <body /> and use it as container of your poppers.

Edit this page

Virtual Elements

FAQ