如何使用bower将改善我的网页的首次下载

Question

我在从我的SPA和基于angularJS的应用程序的index.html文件中添加外部前端库（如bootstrap，angularjs，ui-router等）的引用时，试图理解并找出最佳方法。其背后的原因是，从客户端第一次下载时，当互联网连接不良时，它确实需要很长甚至更长时间。

到目前为止，我知道实现相同目标的现有方法如下：

1. 将下载的库部署到服务器：将库下载到项目内的文件夹中，并从我的 index.html 文件中引用它们。然后，他们将转到生产服务器并在第一次打开网页时下载。
2. 引用云中托管的库或（内容分发网络）CDN 。我知道执行此过程只是意味着通过添加网址来引用文件（如果它们在CDN上可用）而不是我的项目中的库的路线。我认为它可以帮助我节省服务器空间，但 会帮助我在第一次访问SPA时加快下载速度吗？
3. 使用前端程序包管理器（bower）：我知道当我添加库时，我可以设置bower.json文件，该文件引用我的所有前端库。运行命令bower install需要参考出现在bower.json中。然后，通过执行此操作并根据此Manage your Frontend Dependencies with Bower，它表明我能够控制库中的版本，安装它们，甚至更改安装文件时将下载文件的文件或目录。 我是否能够从应用程序的客户端加速下载，或者这对于在克隆回购时避免大量下载非常有用？

我不确定此引用过程的优化是否真的可以帮助我提高页面的性能，而应该考虑压缩文件或类似的东西。

我将非常感谢任何建议和帮助。谢谢！

Answer 1

我认为选项1是禁止的，因为它会变得非常难以管理并使应用程序难以移植。

对于选项2，理论上可以提高下载速度，因为CDN的目的是为客户端提供紧密的网络下载路径，例如：印度的用户可以从印度的CDN下载，而不是从您的服务器下载。加拿大。话虽如此，它也不是最佳的，因为它依赖于多个HTTP请求，如果因为互联网连接而失败，整个应用程序都会受到影响。

选项3我认为最好，因为正如您所提到的，它提供了应用程序的可移植性以及良好的版本控制。另一个主要好处是您可以使用Grunt / Webpack /等预处理所有库代码。通过在构建时下载所有依赖项，缩小，丑化并将所有库代码连接成一个文件，例如vendor.js，因此将HTTP请求的数量减少到只有一个，并以最压缩的格式提供该代码。还有进一步的优化，例如gzip，在CDN上推送整个vendor.js，缓存，预取等等我确定。

Answer 2

1. 根据服务器的分发情况，托管自己服务器上的库可能会很慢。如果您使用的是像Amazon EC2这样的服务，它将不会成为问题，因为亚马逊拥有庞大的全球网络。但是，如果您在物理上运行自己的服务器，那么位于世界各地的用户将会遇到下载缓慢的情况。

2. CDN很快，因为它们通常分布均匀。缺点是，如果CDN下降（相当罕见），您的SPA也是如此。

3. Bower绝对没有提高图书馆下载的速度。它只是一个方便的组织工具，可以跟踪您在项目中使用的库版本。

  

我不确定这个引用过程的优化是否会   真的帮助我改善我的页面的性能，而应该是   考虑压缩文件或类似的东西。

这是对的。如果您要托管自己的文件，则应确保压缩库以便更快地下载。请记住，尽管压缩会使文件较小，以便加快下载速度，但在浏览器解压缩压缩文件时会有轻微的延迟。