Angular5具有Bootstrap4性能？

Question

我正在使用Angular5构建一个应用程序，并希望包含bootstrap。 我包含了Bootstrap4（引导程序的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有特定的角度包，你可以使用（ng-bootstrap）来获得所需的引导功能，如手风琴，模态，日期选择器等。 检查出来：https://ng-bootstrap.github.io/#/home

所以jquery脚本，特别是有角度的，已经过时了。 任何脚本的基本规则应该是：如果您不使用它，请不要包含/加载它。这样快得多！

Answer 3

1. 在终端中编写代码：install-bootstrap
2. 安装引导程序后，打开节点模块文件。
3. 在节点模块中找到引导程序包，然后将其打开。
4. 引导文件中有很多CSS和JS文件，因此 打开您要添加的用于引导的文件，然后复制该文件路径。
5. 在index.html文件中添加路径之后。示例：图像Click here to live example
中的css文件
6. Bootstrap4在Angular5中的性能很好，并且易于使用。