具有 Bootstrap4 性能的 Angular5？

Question

我正在使用 Angular5 构建应用程序并希望包含 bootstrap。 我包含了 Bootstrap4，它（bootstrap 的 JS 部分）依赖于 JQuery 和 Popper.js。

我还阅读了有关使用 CSS grid 比 bootstrap 更灵活的方法来替代 bootstrap。

问题：

使用 bootstrap 是否会显着降低性能（加载速度），因为它依赖于 JQuery 和 Popper.js？

Answer 1

在对如何衡量绩效进行了一些研究后，我发现以下内容可供感兴趣的人参考：

没有 JQuery/Popper.js 也没有 bootstrap4:

没有 JQuery/Popper.js 而有 bootstrap4:

使用 JQuery/Popper.js 和使用 bootstrap4:

结论：

1. 添加 bootstrap4 会使加载时间增加约 150 毫秒
2. 添加 bootstrap4 和 JQuery+Popper.js ~25ms 更多

Answer 2

与提到的其他成员一样，您可以使用 bootstrap 4 而无需脚本。

实际上对我来说这似乎是可行的方法，因为 bootstrap 有特定的 angular 数据包，您可以使用 (ng-bootstrap) 获得所需的 bootstrap 功能，如手风琴、模态、日期选择器等。 查看它们：https://ng-bootstrap.github.io/#/home

所以 jquery 脚本，特别是 angular，已经过时了。 任何脚本的基本规则应该是：如果你不使用它，就不要 include/load 它。这样快多了！