Popper.js 性能

Tree-shaking

尽管 Popper v2 的包大小从v1大幅减少(减少了2 kB，从7 kB 压缩到5 kB )，但这仍然不是最理想的。

Popper 解决了很多用例和复杂性，但为了帮助保持用户的捆绑包大小较小，我们让库可以 tree-shaking 。“tree-shaking” 是从捆绑包中删除未使用代码的过程，这是由 webpack、Rollup 和 Parcel 等捆绑包实现的。

如果你使用的是 CDN，tree-shaking 是不可用的。

Popper Lite

启用 tree-shaking 的最直接的方法是使用Popper Lite并根据您的需要配置它。

而不是下面的:

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

是：

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

Popper Lite只带有以下修饰符：

• popperOffsets
• ** computeStyles**
• applyStyles
• eventListeners

这有效地实现了最小的功能，并且压缩了大约3 kB。如果3 kB对您的应用程序来说仍然太多，我们建议尝试小至1 kB 的 CSS 工具提示替代品。请注意，这样的库有很多 Popper 没有的缺点，所以在必要时进行权衡。

现在，您需要添加所需的修饰符。这些可以在** @popperjs/core/lib/modifiers/ **目录下访问。

通常，我们推荐flip和preventtoverflow，因为这是使用Popper的最吸引人的原因:

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

要默认传递这些额外的修饰符，你可以使用popperGenerator函数:

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],
});

// 现在你可以使用" createpapper "

将元素附加到DOM中

使用Popper的推荐方法是将 Popper 元素附加到它们的引用元素旁边。

这确保了可访问性最佳实践得到遵循，例如键盘导航和屏幕阅读器支持。

在某些情况下，您可能希望将 popper 元素附加到 DOM 的顶部，例如<body/>，这当然也得到了支持，但应该采取一些措施，以确保一切都以最好的方式工作。

为确保最佳性能，建议不要将元件直接附加到<body/>元素，而是在<body/>内创建一个<div/>元件，并将其用作poppers的容器。