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

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

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

将下载的库部署到服务器：将库下载到我的项目中的文件夹中，并从我的index.html文件中引用它们。然后，它们将转到生产服务器，并在网页第一次打开时下载

引用云中托管的库或（内容交付网络）CDN。我知道，执行此过程只意味着通过添加url而不是从我的项目中的库中选择路径来引用文件（如果它们在CDN上可用）。我认为这会帮助我节省服务器空间，但是，它会帮助我在第一次访问SPA时加快下载速度吗？

使用前端包管理器（bower）：我知道，当我添加库时，我可以设置一个bower.json文件，该文件引用我所有的前端库。运行命令

bower install

，以使引用显示在bower.json中。然后，通过这样做，并根据这一点，它表明我能够从库中控制版本，安装它们，甚至更改文件或目录，当您安装它们时，这些文件将在其中下载我是否能够加快从应用程序客户端的下载速度，或者这对于克隆回购协议时避免大量下载非常有用？

我不确定这个引用过程的优化是否真的能帮助我提高页面的性能，而是应该考虑文件压缩之类的问题

---

我真的很感激任何建议和帮助。谢谢

我认为选项1是不可行的，因为它将变得非常难以管理，并且使应用程序难以移植

对于选项2，这在理论上会提高下载速度，因为CDN的目的是为客户端提供紧密的网络下载路径，例如，印度的用户将从印度的CDN下载，而不是从加拿大的服务器下载。也就是说，它也不是最优的，因为它依赖于多个HTTP请求，如果其中一个由于internet连接而失败，整个应用程序都会受到影响

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

从您自己的服务器托管库可能会很慢，这取决于服务器的分布情况。如果您使用的是像AmazonEC2这样的服务，这将不会是一个问题，因为Amazon有一个巨大的全球网络。但是，如果您实际运行自己的服务器，那么位于世界偏远地区的用户将体验到下载速度缓慢的问题

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

Bower在提高库下载速度方面完全没有做任何事情。它只是一个方便的组织工具，用于跟踪您在项目中使用的库的版本

我不确定这个参考过程的优化是否会 确实可以帮助我提高页面的性能，而且应该 考虑压缩文件之类的事情

这是正确的。如果您正在托管自己的文件，则应确保压缩库以更快地下载。请记住，虽然压缩会使文件大小变小以加快下载速度，但在浏览器解压缩压缩文件时会有一点延迟