0

我目前将 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 以上的文件仍然需要很长时间才能加载,那么这真的会缩短加载时间吗?

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

4

1 回答 1

1

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

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

以这种格式编译时,Angular 或其他库运行时会出现任何问题吗?(如果 .map 文件不在同一目录中,控制台会抛出错误)

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

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

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

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

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

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

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


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

于 2014-10-27T16:28:26.687 回答