使用 Bower 如何改进我的网页的首次下载
How using bower would improve the first download of my webpage
我试图理解并找出在我的 bootstrap、angularjs、ui-router 等外部前端库引用时的最佳方法index.html 来自我的 SPA 和基于 angularJS 的应用程序的文件。其背后的原因是，在第一次从客户端下载时，当互联网连接不佳时，确实需要很长时间甚至更长的时间。
到目前为止，我知道实现相同目标的现有方法有以下几种：
- 正在将下载的库部署到服务器：将库下载到我的项目中的一个文件夹并从我的index.html[=33=中引用它们] 文件。然后，它们将转到生产服务器并在第一次打开网页时被下载。
- 引用托管在云或（内容交付网络）CDN 中的库。我知道执行此过程仅意味着引用文件（如果它们在 CDN 上可用) 通过在我的项目中添加 url 而不是来自库的路由。我想这会帮助我在我的服务器上节省 space，但是，它会帮助我在第一次访问 SPA 时加快下载速度吗？
- 使用前端包管理器（bower）：我知道当我添加一个库时，我有可能设置一个 bower.json 文件，它引用我所有的前端库。它需要 运行 命令
bower install 以便引用出现在 bower.json 中。然后，通过这样做并根据此 Manage your Frontend Dependencies with Bower 它指出我能够控制库中的版本，安装它们甚至更改文件或安装文件时将下载文件的目录。 我能否从应用程序的客户端加快下载速度，或者这只是在克隆存储库时避免大量下载有用？
我不确定这个 引用过程 的优化是否真的能帮助我提高页面的性能，而是应该考虑文件的压缩或类似的东西。
我将非常感谢任何建议和帮助。谢谢！
我认为选项 1 是不行的，因为它会变得非常难以管理并使应用程序难以移植。
至于选项 2，理论上可以提高下载速度，因为 CDN 的目的是为客户端提供紧密的网络下载路径，例如印度的用户会从印度的 CDN 下载，而不是从您的服务器下载，例如加拿大。话虽如此，它也不是最佳选择，因为它依赖于多个 HTTP 请求，如果一个请求因互联网连接而失败，整个应用程序都会受到影响。
我认为选项 3 是最好的，因为正如您所提到的，它提供了应用程序的可移植性以及良好的版本控制。另一个主要好处是您可以使用 Grunt/Webpack/etc 预处理所有库代码。通过在构建时下载所有依赖项、缩小、丑化并将所有库代码连接到一个文件中，例如vendor.js，从而将 HTTP 请求的数量减少到只有一个，并以最压缩的格式提供该代码。还有进一步的优化可用，例如 gzip、将您的整个 vendor.js 推送到 CDN、缓存、预取等等我敢肯定。
从您自己的服务器托管库可能会很慢，具体取决于您的服务器的分布情况。如果您使用的是像 Amazon EC2 这样的服务，那将不是问题，因为 Amazon 拥有庞大的全球网络。但是，如果您在物理上 运行 自己的服务器，那么位于世界遥远地区的用户会遇到下载缓慢的问题。
CDN 速度很快，因为它们通常分布良好。不利的一面是，如果 CDN 出现故障（相当罕见），您的 SPA 也会出现故障。
Bower 完全没有提高库下载速度。它只是一个方便的组织工具，用于跟踪您在项目中使用的库的版本。
I'm not sure if the optimization of this referencing process, would
really help me improve the performance of my page and rather should be
thinking about the compression of the files or something like that.
这是正确的。如果您托管自己的文件，则应确保压缩库以加快下载速度。请记住，虽然压缩使文件大小更小以加快下载速度，但是当您的浏览器解压缩压缩文件时会有轻微的延迟。
我试图理解并找出在我的 bootstrap、angularjs、ui-router 等外部前端库引用时的最佳方法index.html 来自我的 SPA 和基于 angularJS 的应用程序的文件。其背后的原因是，在第一次从客户端下载时，当互联网连接不佳时，确实需要很长时间甚至更长的时间。
到目前为止，我知道实现相同目标的现有方法有以下几种：
- 正在将下载的库部署到服务器：将库下载到我的项目中的一个文件夹并从我的index.html[=33=中引用它们] 文件。然后，它们将转到生产服务器并在第一次打开网页时被下载。
- 引用托管在云或（内容交付网络）CDN 中的库。我知道执行此过程仅意味着引用文件（如果它们在 CDN 上可用) 通过在我的项目中添加 url 而不是来自库的路由。我想这会帮助我在我的服务器上节省 space，但是，它会帮助我在第一次访问 SPA 时加快下载速度吗？
- 使用前端包管理器（bower）：我知道当我添加一个库时，我有可能设置一个 bower.json 文件，它引用我所有的前端库。它需要 运行 命令
bower install以便引用出现在 bower.json 中。然后，通过这样做并根据此 Manage your Frontend Dependencies with Bower 它指出我能够控制库中的版本，安装它们甚至更改文件或安装文件时将下载文件的目录。 我能否从应用程序的客户端加快下载速度，或者这只是在克隆存储库时避免大量下载有用？
我不确定这个 引用过程 的优化是否真的能帮助我提高页面的性能，而是应该考虑文件的压缩或类似的东西。
我将非常感谢任何建议和帮助。谢谢！
我认为选项 1 是不行的，因为它会变得非常难以管理并使应用程序难以移植。
至于选项 2，理论上可以提高下载速度，因为 CDN 的目的是为客户端提供紧密的网络下载路径，例如印度的用户会从印度的 CDN 下载，而不是从您的服务器下载，例如加拿大。话虽如此，它也不是最佳选择，因为它依赖于多个 HTTP 请求，如果一个请求因互联网连接而失败，整个应用程序都会受到影响。
我认为选项 3 是最好的，因为正如您所提到的，它提供了应用程序的可移植性以及良好的版本控制。另一个主要好处是您可以使用 Grunt/Webpack/etc 预处理所有库代码。通过在构建时下载所有依赖项、缩小、丑化并将所有库代码连接到一个文件中，例如vendor.js，从而将 HTTP 请求的数量减少到只有一个，并以最压缩的格式提供该代码。还有进一步的优化可用，例如 gzip、将您的整个 vendor.js 推送到 CDN、缓存、预取等等我敢肯定。
从您自己的服务器托管库可能会很慢，具体取决于您的服务器的分布情况。如果您使用的是像 Amazon EC2 这样的服务，那将不是问题，因为 Amazon 拥有庞大的全球网络。但是，如果您在物理上 运行 自己的服务器，那么位于世界遥远地区的用户会遇到下载缓慢的问题。
CDN 速度很快，因为它们通常分布良好。不利的一面是，如果 CDN 出现故障（相当罕见），您的 SPA 也会出现故障。
Bower 完全没有提高库下载速度。它只是一个方便的组织工具，用于跟踪您在项目中使用的库的版本。
I'm not sure if the optimization of this referencing process, would really help me improve the performance of my page and rather should be thinking about the compression of the files or something like that.
这是正确的。如果您托管自己的文件，则应确保压缩库以加快下载速度。请记住，虽然压缩使文件大小更小以加快下载速度，但是当您的浏览器解压缩压缩文件时会有轻微的延迟。