浏览器加载资源的最有效方式

Question

我目前将 Angular 与 ng-routes、ng-table 和 ng-animate 一起使用。我还使用其他库，例如 jQuery 和 Modernizr。最后我有了自己的自定义 javascript，可以是多个文件。

所以我的项目会加载一长串这样的资源：

<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/modernizr.min.js></script>
<script type="text/javascript" src="/lib/angular.min.js"></script>
<script type="text/javascript" src="/lib/angular-route.min.js"></script>
<script type="text/javascript" src="/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>

我知道我可以通过减少 HTTP 调用和压缩所有文件来加快我的项目。

我使用 CodeKit，它提供了将 JS 文件相互导入并将它们编译成单个压缩文件的选项。如果我对上面的列表执行此操作，那么我只需加载一个像这样的文件：

<script type="text/javascript" src="/js/main.min.js"></script>

单个 HTTP 调用而不是 6+，并且所有代码都被缩小了。这里的问题是单个文件是 500kb+ 并且在一个完整的项目中会大得多，可能超过 1mb。

• 这是否意味着文件太大而不会被浏览器缓存？
• Angular 或其他库在以这种格式编译时会出现运行问题吗？ （如果 .map 文件不在同一目录中，控制台会抛出错误）
• 当然，一个 500kb 以上的文件仍然需要很长时间才能加载，那么这真的会缩短加载时间吗？

我认为它必须等待整个大文件加载后才能执行任何操作。而如果文件是分开的，它们可以在每个加载后立即开始执行脚本。

Answer 1

这是否意味着文件太大而不会被浏览器缓存？

这取决于浏览器。桌面浏览器应该没有任何问题，但移动设备会。

Angular 或其他库在以这种格式编译时会出现问题吗？ （如果 .map 文件不在同一目录中，控制台会抛出错误）

不。 .map 问题不会影响您的最终用户，除非他们打开控制台。这也可以通过生成组合版本的 .map 文件的构建过程来解决。

当然，一个 500kb 以上的文件仍然需要很长时间才能加载，所以这真的会缩短加载时间吗？

是的，因为您没有在每个请求中来回传递 cookie 和 http 标头。

但是，您可以采取一些措施来缩短加载时间。例如，我将文件分为两类：

立即需要的文件，以及以后可以加载的文件。

不幸的是，您无法在没有后果的情况下真正使用 Angular 进行区分，因为所有路由都需要预先定义，以及所述路由所需的所有控制器和服务。您唯一可以真正删除的是内联模板，因为稍后可以通过 ajax 请求模板。

我能够为我的一个应用程序进行这样的拆分；我拆分了管理代码和客户端代码，仅在管理员登录成功后才包含管理代码。这对管理员来说很不方便，因为管理员无法直接进入管理页面，也无法在没有问题的情况下重新加载管理页面，但它确实减少了非管理员用户的加载时间。

---

这使您只有一个真正的选择：减小您所包含内容的整体大小。这意味着使控制器和服务尽可能可重用，并且不包括不必要的代码。看看你的例子，你包括了 jQuery。 jQuery 的目的是让编写 ajax 请求和选择/操作 DOM 节点变得更容易，Angular 已经涵盖了这两者。因此，您可以通过移除 jQuery 并使用基于角度的插件来减少代码库的大小。